diff --git a/.changeset/whole-beans-arrive.md b/.changeset/whole-beans-arrive.md
new file mode 100644
index 0000000000..c97004ce90
--- /dev/null
+++ b/.changeset/whole-beans-arrive.md
@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+add phosphor icons
diff --git a/apps/v4/app/(create)/components/icon-library-picker.tsx b/apps/v4/app/(create)/components/icon-library-picker.tsx
index 9b543fdf54..9d2f334f3d 100644
--- a/apps/v4/app/(create)/components/icon-library-picker.tsx
+++ b/apps/v4/app/(create)/components/icon-library-picker.tsx
@@ -39,6 +39,12 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
 const PREVIEW_ICONS = {
   lucide: [
     "CopyIcon",
@@ -88,6 +94,22 @@ const PREVIEW_ICONS = {
     "ArrowDown01Icon",
     "ArrowRight01Icon",
   ],
+  phosphor: [
+    "CopyIcon",
+    "WarningCircleIcon",
+    "TrashIcon",
+    "ShareIcon",
+    "BagIcon",
+    "DotsThreeIcon",
+    "SpinnerIcon",
+    "PlusIcon",
+    "MinusIcon",
+    "ArrowLeftIcon",
+    "ArrowRightIcon",
+    "CheckIcon",
+    "CaretDownIcon",
+    "CaretRightIcon",
+  ],
 }
 
 const logos = {
@@ -154,6 +176,24 @@ const logos = {
       ></path>
     </svg>
   ),
+  phosphor: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+    >
+      <path fill="none" d="M0 0h32v32H0z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
+      />
+    </svg>
+  ),
 }
 
 export function IconLibraryPicker({
@@ -259,7 +299,9 @@ const IconLibraryPreview = memo(function IconLibraryPreview({
       ? IconLucide
       : iconLibrary === "tabler"
         ? IconTabler
-        : IconHugeicons
+        : iconLibrary === "hugeicons"
+          ? IconHugeicons
+          : IconPhosphor
 
   return (
     <Suspense
diff --git a/apps/v4/app/(create)/components/icon-placeholder.tsx b/apps/v4/app/(create)/components/icon-placeholder.tsx
index a380681371..9e648bae62 100644
--- a/apps/v4/app/(create)/components/icon-placeholder.tsx
+++ b/apps/v4/app/(create)/components/icon-placeholder.tsx
@@ -24,6 +24,12 @@ const IconHugeicons = lazy(() =>
   }))
 )
 
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
 export function IconPlaceholder({
   ...props
 }: {
@@ -43,6 +49,9 @@ export function IconPlaceholder({
       {iconLibrary === "hugeicons" && (
         <IconHugeicons name={iconName} {...props} />
       )}
+      {iconLibrary === "phosphor" && (
+        <IconPhosphor name={iconName} {...props} />
+      )}
     </Suspense>
   )
 }
diff --git a/apps/v4/app/(create)/components/picker.tsx b/apps/v4/app/(create)/components/picker.tsx
index d680388222..45ac0591c3 100644
--- a/apps/v4/app/(create)/components/picker.tsx
+++ b/apps/v4/app/(create)/components/picker.tsx
@@ -138,6 +138,7 @@ function PickerSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto"
       />
     </MenuPrimitive.SubmenuTrigger>
@@ -190,6 +191,7 @@ function PickerCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -230,6 +232,7 @@ function PickerRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
             className="size-4 pointer-coarse:size-5"
           />
         </MenuPrimitive.RadioItemIndicator>
diff --git a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
index ca922b654a..0aa2250e40 100644
--- a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
@@ -117,6 +117,7 @@ function DropdownMenuCheckboxes() {
               lucide="UserIcon"
               tabler="IconUser"
               hugeicons="UserIcon"
+              phosphor="UserIcon"
             />
             Profile
           </DropdownMenuItem>
@@ -125,6 +126,7 @@ function DropdownMenuCheckboxes() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -133,6 +135,7 @@ function DropdownMenuCheckboxes() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
             />
             Settings
           </DropdownMenuItem>
@@ -167,6 +170,7 @@ function DropdownMenuCheckboxes() {
               lucide="LogOutIcon"
               tabler="IconLogout"
               hugeicons="LogoutIcon"
+              phosphor="SignOutIcon"
             />
             Sign Out
           </DropdownMenuItem>
@@ -222,6 +226,7 @@ function DropdownMenuWithAvatar() {
             lucide="ChevronsUpDownIcon"
             tabler="IconChevronsUpDown"
             hugeicons="ChevronUpDownIcon"
+            phosphor="CaretUpDownIcon"
             className="text-muted-foreground ml-auto"
           />
         </Button>
@@ -251,6 +256,7 @@ function DropdownMenuWithAvatar() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -262,6 +268,7 @@ function DropdownMenuWithAvatar() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
             />
             Account
           </DropdownMenuItem>
@@ -270,6 +277,7 @@ function DropdownMenuWithAvatar() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -278,6 +286,7 @@ function DropdownMenuWithAvatar() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
             />
             Notifications
           </DropdownMenuItem>
@@ -288,6 +297,7 @@ function DropdownMenuWithAvatar() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
           />
           Sign Out
         </DropdownMenuItem>
@@ -341,6 +351,7 @@ function DropdownMenuAvatarOnly() {
               lucide="SparklesIcon"
               tabler="IconSparkles"
               hugeicons="SparklesIcon"
+              phosphor="SparklesIcon"
             />
             Upgrade to Pro
           </DropdownMenuItem>
@@ -352,6 +363,7 @@ function DropdownMenuAvatarOnly() {
               lucide="BadgeCheckIcon"
               tabler="IconBadgeCheck"
               hugeicons="BadgeCheckIcon"
+              phosphor="CheckCircleIcon"
             />
             Account
           </DropdownMenuItem>
@@ -360,6 +372,7 @@ function DropdownMenuAvatarOnly() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -368,6 +381,7 @@ function DropdownMenuAvatarOnly() {
               lucide="BellIcon"
               tabler="IconBell"
               hugeicons="BellIcon"
+              phosphor="BellIcon"
             />
             Notifications
           </DropdownMenuItem>
@@ -378,6 +392,7 @@ function DropdownMenuAvatarOnly() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
           />
           Sign Out
         </DropdownMenuItem>
@@ -395,6 +410,7 @@ function DropdownMenuIconColor() {
             lucide="MoreHorizontalIcon"
             tabler="IconDots"
             hugeicons="MoreHorizontalCircle01Icon"
+            phosphor="DotsThreeOutlineIcon"
           />
           <span className="sr-only">Toggle menu</span>
         </Button>
@@ -406,6 +422,7 @@ function DropdownMenuIconColor() {
               lucide="PencilIcon"
               tabler="IconPencil"
               hugeicons="EditIcon"
+              phosphor="PencilIcon"
             />
             Edit
           </DropdownMenuItem>
@@ -414,6 +431,7 @@ function DropdownMenuIconColor() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="ShareIcon"
+              phosphor="ShareIcon"
             />
             Share
           </DropdownMenuItem>
@@ -423,6 +441,7 @@ function DropdownMenuIconColor() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="DeleteIcon"
+              phosphor="TrashIcon"
             />
             Delete
           </DropdownMenuItem>
diff --git a/apps/v4/package.json b/apps/v4/package.json
index dcd7599827..7b2ad9168a 100644
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -30,6 +30,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@hugeicons/core-free-icons": "^1.2.1",
     "@hugeicons/react": "^1.1.1",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-accessible-icon": "^1.1.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.5",
diff --git a/apps/v4/public/r/styles/base-lyra/accordion-example.json b/apps/v4/public/r/styles/base-lyra/accordion-example.json
index 984683abc8..b10b004647 100644
--- a/apps/v4/public/r/styles/base-lyra/accordion-example.json
+++ b/apps/v4/public/r/styles/base-lyra/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/accordion.json b/apps/v4/public/r/styles/base-lyra/accordion.json
index 575ae8a7e2..beef25c92e 100644
--- a/apps/v4/public/r/styles/base-lyra/accordion.json
+++ b/apps/v4/public/r/styles/base-lyra/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json b/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json
index 1570298266..9c1043e479 100644
--- a/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/base-lyra/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/alert-example.json b/apps/v4/public/r/styles/base-lyra/alert-example.json
index 3e0f5c3e06..a373268410 100644
--- a/apps/v4/public/r/styles/base-lyra/alert-example.json
+++ b/apps/v4/public/r/styles/base-lyra/alert-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/avatar-example.json b/apps/v4/public/r/styles/base-lyra/avatar-example.json
index 2009c3b694..0ee1fdc80d 100644
--- a/apps/v4/public/r/styles/base-lyra/avatar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/badge-example.json b/apps/v4/public/r/styles/base-lyra/badge-example.json
index db2667aa1e..9667dc1755 100644
--- a/apps/v4/public/r/styles/base-lyra/badge-example.json
+++ b/apps/v4/public/r/styles/base-lyra/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb.json b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
index 1bf3f87f42..d903abfeba 100644
--- a/apps/v4/public/r/styles/base-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-example.json b/apps/v4/public/r/styles/base-lyra/button-example.json
index 07bbd6cf65..50e7773318 100644
--- a/apps/v4/public/r/styles/base-lyra/button-example.json
+++ b/apps/v4/public/r/styles/base-lyra/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-group-example.json b/apps/v4/public/r/styles/base-lyra/button-group-example.json
index 8969972199..2e4ad5e00a 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/calendar-example.json b/apps/v4/public/r/styles/base-lyra/calendar-example.json
index 594830b142..ccab7c5e65 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/calendar.json b/apps/v4/public/r/styles/base-lyra/calendar.json
index 2e296880ee..5de2511806 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/card-example.json b/apps/v4/public/r/styles/base-lyra/card-example.json
index 40d4c04424..c2251de459 100644
--- a/apps/v4/public/r/styles/base-lyra/card-example.json
+++ b/apps/v4/public/r/styles/base-lyra/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/carousel.json b/apps/v4/public/r/styles/base-lyra/carousel.json
index 765eb9b561..4de2f3f7aa 100644
--- a/apps/v4/public/r/styles/base-lyra/carousel.json
+++ b/apps/v4/public/r/styles/base-lyra/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/chart-example.json b/apps/v4/public/r/styles/base-lyra/chart-example.json
index 0a523932af..de9c9f80c2 100644
--- a/apps/v4/public/r/styles/base-lyra/chart-example.json
+++ b/apps/v4/public/r/styles/base-lyra/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/chatgpt.json b/apps/v4/public/r/styles/base-lyra/chatgpt.json
index a636e31be4..cd24da9e2d 100644
--- a/apps/v4/public/r/styles/base-lyra/chatgpt.json
+++ b/apps/v4/public/r/styles/base-lyra/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/checkbox.json b/apps/v4/public/r/styles/base-lyra/checkbox.json
index 87912e27b3..6c89458e9f 100644
--- a/apps/v4/public/r/styles/base-lyra/checkbox.json
+++ b/apps/v4/public/r/styles/base-lyra/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/collapsible-example.json b/apps/v4/public/r/styles/base-lyra/collapsible-example.json
index d7f0bb605c..209ae3808b 100644
--- a/apps/v4/public/r/styles/base-lyra/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-lyra/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/combobox-example.json b/apps/v4/public/r/styles/base-lyra/combobox-example.json
index a87118ed52..0e4f09d128 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/combobox.json b/apps/v4/public/r/styles/base-lyra/combobox.json
index dcf6bf7364..63851fa9b3 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/command-example.json b/apps/v4/public/r/styles/base-lyra/command-example.json
index fcf66f9d35..26643f9cc1 100644
--- a/apps/v4/public/r/styles/base-lyra/command-example.json
+++ b/apps/v4/public/r/styles/base-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/command.json b/apps/v4/public/r/styles/base-lyra/command.json
index b740525743..71125def9f 100644
--- a/apps/v4/public/r/styles/base-lyra/command.json
+++ b/apps/v4/public/r/styles/base-lyra/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-none overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-none overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/component-example.json b/apps/v4/public/r/styles/base-lyra/component-example.json
index 117a9b244a..151806546f 100644
--- a/apps/v4/public/r/styles/base-lyra/component-example.json
+++ b/apps/v4/public/r/styles/base-lyra/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/context-menu-example.json b/apps/v4/public/r/styles/base-lyra/context-menu-example.json
index fbe545e09d..4d8de6776f 100644
--- a/apps/v4/public/r/styles/base-lyra/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/context-menu.json b/apps/v4/public/r/styles/base-lyra/context-menu.json
index 82ad4b16c7..a6896437ec 100644
--- a/apps/v4/public/r/styles/base-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dialog-example.json b/apps/v4/public/r/styles/base-lyra/dialog-example.json
index 868dcd9e0c..da3b359da3 100644
--- a/apps/v4/public/r/styles/base-lyra/dialog-example.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dialog.json b/apps/v4/public/r/styles/base-lyra/dialog.json
index f6301b32f7..c4eedf4d1a 100644
--- a/apps/v4/public/r/styles/base-lyra/dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
index bf30c05dfb..15df6651cd 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
index d8b36aa8d2..4926e43573 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/empty-example.json b/apps/v4/public/r/styles/base-lyra/empty-example.json
index df8fff2198..1af8a81d20 100644
--- a/apps/v4/public/r/styles/base-lyra/empty-example.json
+++ b/apps/v4/public/r/styles/base-lyra/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/github.json b/apps/v4/public/r/styles/base-lyra/github.json
index 62031535b7..466b259ebc 100644
--- a/apps/v4/public/r/styles/base-lyra/github.json
+++ b/apps/v4/public/r/styles/base-lyra/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-group-example.json b/apps/v4/public/r/styles/base-lyra/input-group-example.json
index 45d688b56a..e6df8720d1 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-otp-example.json b/apps/v4/public/r/styles/base-lyra/input-otp-example.json
index 43eeb2cc35..4e9b5f3c96 100644
--- a/apps/v4/public/r/styles/base-lyra/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-otp.json b/apps/v4/public/r/styles/base-lyra/input-otp.json
index 55e8d0acb7..09d1764930 100644
--- a/apps/v4/public/r/styles/base-lyra/input-otp.json
+++ b/apps/v4/public/r/styles/base-lyra/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/item-example.json b/apps/v4/public/r/styles/base-lyra/item-example.json
index 1eaf631449..8ecf0dfae5 100644
--- a/apps/v4/public/r/styles/base-lyra/item-example.json
+++ b/apps/v4/public/r/styles/base-lyra/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/kbd-example.json b/apps/v4/public/r/styles/base-lyra/kbd-example.json
index a728dfae7e..1d964b6d76 100644
--- a/apps/v4/public/r/styles/base-lyra/kbd-example.json
+++ b/apps/v4/public/r/styles/base-lyra/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/menubar-example.json b/apps/v4/public/r/styles/base-lyra/menubar-example.json
index 98fdc69c5c..79232e0b29 100644
--- a/apps/v4/public/r/styles/base-lyra/menubar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/menubar.json b/apps/v4/public/r/styles/base-lyra/menubar.json
index e258fdb870..d74a16c970 100644
--- a/apps/v4/public/r/styles/base-lyra/menubar.json
+++ b/apps/v4/public/r/styles/base-lyra/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/native-select.json b/apps/v4/public/r/styles/base-lyra/native-select.json
index 680144a799..ecb9f520bc 100644
--- a/apps/v4/public/r/styles/base-lyra/native-select.json
+++ b/apps/v4/public/r/styles/base-lyra/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json b/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
index 9efa5890a7..34418fcf39 100644
--- a/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/navigation-menu.json b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
index 96fb4645b3..ea3a1abe61 100644
--- a/apps/v4/public/r/styles/base-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/pagination.json b/apps/v4/public/r/styles/base-lyra/pagination.json
index f7666e0a91..9322c9bb0b 100644
--- a/apps/v4/public/r/styles/base-lyra/pagination.json
+++ b/apps/v4/public/r/styles/base-lyra/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/preview.json b/apps/v4/public/r/styles/base-lyra/preview.json
index 518eb08c4d..3a89d390bd 100644
--- a/apps/v4/public/r/styles/base-lyra/preview.json
+++ b/apps/v4/public/r/styles/base-lyra/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/progress-example.json b/apps/v4/public/r/styles/base-lyra/progress-example.json
index e856f51039..73ec261315 100644
--- a/apps/v4/public/r/styles/base-lyra/progress-example.json
+++ b/apps/v4/public/r/styles/base-lyra/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/radio-group.json b/apps/v4/public/r/styles/base-lyra/radio-group.json
index b91f151e09..2200038c9e 100644
--- a/apps/v4/public/r/styles/base-lyra/radio-group.json
+++ b/apps/v4/public/r/styles/base-lyra/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/select-example.json b/apps/v4/public/r/styles/base-lyra/select-example.json
index 08e1f4b3b8..f3dc473c01 100644
--- a/apps/v4/public/r/styles/base-lyra/select-example.json
+++ b/apps/v4/public/r/styles/base-lyra/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/select.json b/apps/v4/public/r/styles/base-lyra/select.json
index 2ae9bdb778..8c2eaa7dfc 100644
--- a/apps/v4/public/r/styles/base-lyra/select.json
+++ b/apps/v4/public/r/styles/base-lyra/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sheet.json b/apps/v4/public/r/styles/base-lyra/sheet.json
index 358c065e03..ae8ca38848 100644
--- a/apps/v4/public/r/styles/base-lyra/sheet.json
+++ b/apps/v4/public/r/styles/base-lyra/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-example.json
index a472ca23bb..083c49aee1 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
index d202616840..b78e88620d 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
index d4a7fbe2ba..6750d7bd8b 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
index 3b50f09311..78641b88d0 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar.json b/apps/v4/public/r/styles/base-lyra/sidebar.json
index 5c747135f1..e667b98fe8 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sonner.json b/apps/v4/public/r/styles/base-lyra/sonner.json
index 155c82d49b..4f221d720d 100644
--- a/apps/v4/public/r/styles/base-lyra/sonner.json
+++ b/apps/v4/public/r/styles/base-lyra/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/spinner-example.json b/apps/v4/public/r/styles/base-lyra/spinner-example.json
index 1395e07992..1d2fb89bcc 100644
--- a/apps/v4/public/r/styles/base-lyra/spinner-example.json
+++ b/apps/v4/public/r/styles/base-lyra/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/spinner.json b/apps/v4/public/r/styles/base-lyra/spinner.json
index 51387432ea..4c0fc5225a 100644
--- a/apps/v4/public/r/styles/base-lyra/spinner.json
+++ b/apps/v4/public/r/styles/base-lyra/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/table-example.json b/apps/v4/public/r/styles/base-lyra/table-example.json
index ac50afea37..1dd7fa2391 100644
--- a/apps/v4/public/r/styles/base-lyra/table-example.json
+++ b/apps/v4/public/r/styles/base-lyra/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/table-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tabs-example.json b/apps/v4/public/r/styles/base-lyra/tabs-example.json
index a65aab8594..7f284fbba8 100644
--- a/apps/v4/public/r/styles/base-lyra/tabs-example.json
+++ b/apps/v4/public/r/styles/base-lyra/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-example.json b/apps/v4/public/r/styles/base-lyra/toggle-example.json
index 2dda4682a1..543e10cce1 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-example.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 30f0b3bd81..84f4b5d691 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/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\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          />\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          />\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tooltip-example.json b/apps/v4/public/r/styles/base-lyra/tooltip-example.json
index bf4536a712..780536651e 100644
--- a/apps/v4/public/r/styles/base-lyra/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-lyra/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/vercel.json b/apps/v4/public/r/styles/base-lyra/vercel.json
index 45b05684c2..7652fc12dc 100644
--- a/apps/v4/public/r/styles/base-lyra/vercel.json
+++ b/apps/v4/public/r/styles/base-lyra/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/accordion-example.json b/apps/v4/public/r/styles/base-maia/accordion-example.json
index d02de36a58..952b6b3291 100644
--- a/apps/v4/public/r/styles/base-maia/accordion-example.json
+++ b/apps/v4/public/r/styles/base-maia/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/accordion.json b/apps/v4/public/r/styles/base-maia/accordion.json
index 268a3a6b48..5f082823a2 100644
--- a/apps/v4/public/r/styles/base-maia/accordion.json
+++ b/apps/v4/public/r/styles/base-maia/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/alert-dialog-example.json b/apps/v4/public/r/styles/base-maia/alert-dialog-example.json
index 55638417b8..449be8c454 100644
--- a/apps/v4/public/r/styles/base-maia/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/base-maia/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/alert-example.json b/apps/v4/public/r/styles/base-maia/alert-example.json
index dacc62c52a..468d6ceee6 100644
--- a/apps/v4/public/r/styles/base-maia/alert-example.json
+++ b/apps/v4/public/r/styles/base-maia/alert-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/avatar-example.json b/apps/v4/public/r/styles/base-maia/avatar-example.json
index 5e2f0b7934..3c9cb21fd4 100644
--- a/apps/v4/public/r/styles/base-maia/avatar-example.json
+++ b/apps/v4/public/r/styles/base-maia/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/badge-example.json b/apps/v4/public/r/styles/base-maia/badge-example.json
index 8a374146ab..99373665b3 100644
--- a/apps/v4/public/r/styles/base-maia/badge-example.json
+++ b/apps/v4/public/r/styles/base-maia/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/breadcrumb.json b/apps/v4/public/r/styles/base-maia/breadcrumb.json
index 455e7aeb2a..4d0aa4be35 100644
--- a/apps/v4/public/r/styles/base-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-maia/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-example.json b/apps/v4/public/r/styles/base-maia/button-example.json
index eabef5203c..a1acf32648 100644
--- a/apps/v4/public/r/styles/base-maia/button-example.json
+++ b/apps/v4/public/r/styles/base-maia/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-group-example.json b/apps/v4/public/r/styles/base-maia/button-group-example.json
index 3067a1e635..9387a3da83 100644
--- a/apps/v4/public/r/styles/base-maia/button-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/calendar-example.json b/apps/v4/public/r/styles/base-maia/calendar-example.json
index eb4e933f10..6e5456d29d 100644
--- a/apps/v4/public/r/styles/base-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/base-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/calendar.json b/apps/v4/public/r/styles/base-maia/calendar.json
index 683def6a7c..090cd463cd 100644
--- a/apps/v4/public/r/styles/base-maia/calendar.json
+++ b/apps/v4/public/r/styles/base-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/card-example.json b/apps/v4/public/r/styles/base-maia/card-example.json
index 581d2a8665..db4f3ff1b7 100644
--- a/apps/v4/public/r/styles/base-maia/card-example.json
+++ b/apps/v4/public/r/styles/base-maia/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/carousel.json b/apps/v4/public/r/styles/base-maia/carousel.json
index 200ff0f02f..9223cb0b55 100644
--- a/apps/v4/public/r/styles/base-maia/carousel.json
+++ b/apps/v4/public/r/styles/base-maia/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/chart-example.json b/apps/v4/public/r/styles/base-maia/chart-example.json
index 362597cd61..2c3fb0a6fe 100644
--- a/apps/v4/public/r/styles/base-maia/chart-example.json
+++ b/apps/v4/public/r/styles/base-maia/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/chatgpt.json b/apps/v4/public/r/styles/base-maia/chatgpt.json
index 0fd29fa734..9307657655 100644
--- a/apps/v4/public/r/styles/base-maia/chatgpt.json
+++ b/apps/v4/public/r/styles/base-maia/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/checkbox.json b/apps/v4/public/r/styles/base-maia/checkbox.json
index 6372170f89..ecf1e92009 100644
--- a/apps/v4/public/r/styles/base-maia/checkbox.json
+++ b/apps/v4/public/r/styles/base-maia/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/collapsible-example.json b/apps/v4/public/r/styles/base-maia/collapsible-example.json
index ae0009b549..1ab8d6c827 100644
--- a/apps/v4/public/r/styles/base-maia/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-maia/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/combobox-example.json b/apps/v4/public/r/styles/base-maia/combobox-example.json
index 80c30c741d..b0f5c4d32e 100644
--- a/apps/v4/public/r/styles/base-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/base-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/combobox.json b/apps/v4/public/r/styles/base-maia/combobox.json
index cd148b3cad..874c1c47dd 100644
--- a/apps/v4/public/r/styles/base-maia/combobox.json
+++ b/apps/v4/public/r/styles/base-maia/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/command-example.json b/apps/v4/public/r/styles/base-maia/command-example.json
index 5cfcc4a97b..6657b2a78d 100644
--- a/apps/v4/public/r/styles/base-maia/command-example.json
+++ b/apps/v4/public/r/styles/base-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/command.json b/apps/v4/public/r/styles/base-maia/command.json
index ed61eb38cb..b4f6a3ed79 100644
--- a/apps/v4/public/r/styles/base-maia/command.json
+++ b/apps/v4/public/r/styles/base-maia/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-4xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-4xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/component-example.json b/apps/v4/public/r/styles/base-maia/component-example.json
index 4edb4b42c0..5c7e78038f 100644
--- a/apps/v4/public/r/styles/base-maia/component-example.json
+++ b/apps/v4/public/r/styles/base-maia/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/context-menu-example.json b/apps/v4/public/r/styles/base-maia/context-menu-example.json
index e1d4b4cbfc..ec35e0e6e6 100644
--- a/apps/v4/public/r/styles/base-maia/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/context-menu.json b/apps/v4/public/r/styles/base-maia/context-menu.json
index 0734bd5566..bb6c3d93f5 100644
--- a/apps/v4/public/r/styles/base-maia/context-menu.json
+++ b/apps/v4/public/r/styles/base-maia/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dialog-example.json b/apps/v4/public/r/styles/base-maia/dialog-example.json
index 5c2e4b913c..1ccba0ce37 100644
--- a/apps/v4/public/r/styles/base-maia/dialog-example.json
+++ b/apps/v4/public/r/styles/base-maia/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dialog.json b/apps/v4/public/r/styles/base-maia/dialog.json
index 3df67df3b6..11f59f2c96 100644
--- a/apps/v4/public/r/styles/base-maia/dialog.json
+++ b/apps/v4/public/r/styles/base-maia/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
index 3903782634..a6583dd286 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu.json b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
index 225d499d86..57930130f2 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/empty-example.json b/apps/v4/public/r/styles/base-maia/empty-example.json
index ec2712e98b..ca32de5ad5 100644
--- a/apps/v4/public/r/styles/base-maia/empty-example.json
+++ b/apps/v4/public/r/styles/base-maia/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/github.json b/apps/v4/public/r/styles/base-maia/github.json
index 12fbb38650..5838318cb2 100644
--- a/apps/v4/public/r/styles/base-maia/github.json
+++ b/apps/v4/public/r/styles/base-maia/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-group-example.json b/apps/v4/public/r/styles/base-maia/input-group-example.json
index 3e0ed335f9..da6b08c020 100644
--- a/apps/v4/public/r/styles/base-maia/input-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-otp-example.json b/apps/v4/public/r/styles/base-maia/input-otp-example.json
index 3e73dbab6f..a888bfbc4e 100644
--- a/apps/v4/public/r/styles/base-maia/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-otp.json b/apps/v4/public/r/styles/base-maia/input-otp.json
index d60ea69f89..25bfff11d4 100644
--- a/apps/v4/public/r/styles/base-maia/input-otp.json
+++ b/apps/v4/public/r/styles/base-maia/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/item-example.json b/apps/v4/public/r/styles/base-maia/item-example.json
index c078f7baeb..aaea31ae7d 100644
--- a/apps/v4/public/r/styles/base-maia/item-example.json
+++ b/apps/v4/public/r/styles/base-maia/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/kbd-example.json b/apps/v4/public/r/styles/base-maia/kbd-example.json
index 8ba261894f..982fc19e13 100644
--- a/apps/v4/public/r/styles/base-maia/kbd-example.json
+++ b/apps/v4/public/r/styles/base-maia/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/menubar-example.json b/apps/v4/public/r/styles/base-maia/menubar-example.json
index 6b4ae29dea..f311dfb1e4 100644
--- a/apps/v4/public/r/styles/base-maia/menubar-example.json
+++ b/apps/v4/public/r/styles/base-maia/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/menubar.json b/apps/v4/public/r/styles/base-maia/menubar.json
index 98c059343e..674da10d77 100644
--- a/apps/v4/public/r/styles/base-maia/menubar.json
+++ b/apps/v4/public/r/styles/base-maia/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/native-select.json b/apps/v4/public/r/styles/base-maia/native-select.json
index 575870d46b..faac96ae65 100644
--- a/apps/v4/public/r/styles/base-maia/native-select.json
+++ b/apps/v4/public/r/styles/base-maia/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-3.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-3.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/navigation-menu-example.json b/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
index bc0908a0fa..327ffa22ae 100644
--- a/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/navigation-menu.json b/apps/v4/public/r/styles/base-maia/navigation-menu.json
index 4d6c52b2f4..1b36e1263a 100644
--- a/apps/v4/public/r/styles/base-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-maia/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/pagination.json b/apps/v4/public/r/styles/base-maia/pagination.json
index 969d609cfa..571b2869f9 100644
--- a/apps/v4/public/r/styles/base-maia/pagination.json
+++ b/apps/v4/public/r/styles/base-maia/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/preview.json b/apps/v4/public/r/styles/base-maia/preview.json
index 95a434eba6..58d9966487 100644
--- a/apps/v4/public/r/styles/base-maia/preview.json
+++ b/apps/v4/public/r/styles/base-maia/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/progress-example.json b/apps/v4/public/r/styles/base-maia/progress-example.json
index 7edf90a41e..c16926c1de 100644
--- a/apps/v4/public/r/styles/base-maia/progress-example.json
+++ b/apps/v4/public/r/styles/base-maia/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/radio-group.json b/apps/v4/public/r/styles/base-maia/radio-group.json
index 602aaf1a35..c496c8122f 100644
--- a/apps/v4/public/r/styles/base-maia/radio-group.json
+++ b/apps/v4/public/r/styles/base-maia/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/select-example.json b/apps/v4/public/r/styles/base-maia/select-example.json
index c62ffad8f3..657ed8e555 100644
--- a/apps/v4/public/r/styles/base-maia/select-example.json
+++ b/apps/v4/public/r/styles/base-maia/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/select.json b/apps/v4/public/r/styles/base-maia/select.json
index b7834900cc..5c1607761c 100644
--- a/apps/v4/public/r/styles/base-maia/select.json
+++ b/apps/v4/public/r/styles/base-maia/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sheet.json b/apps/v4/public/r/styles/base-maia/sheet.json
index 8c822ea7b1..e650f5c363 100644
--- a/apps/v4/public/r/styles/base-maia/sheet.json
+++ b/apps/v4/public/r/styles/base-maia/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-example.json b/apps/v4/public/r/styles/base-maia/sidebar-example.json
index 91e72d6915..ac81f80cdb 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json b/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
index e9f3e5047a..b67b966e96 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
index 5e2da31ec5..c4400d404d 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json b/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
index 53a6182305..eed0a9e2e4 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar.json b/apps/v4/public/r/styles/base-maia/sidebar.json
index bf0d87bba3..0712a5ea03 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sonner.json b/apps/v4/public/r/styles/base-maia/sonner.json
index 565ac5427b..ecc39e4556 100644
--- a/apps/v4/public/r/styles/base-maia/sonner.json
+++ b/apps/v4/public/r/styles/base-maia/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/spinner-example.json b/apps/v4/public/r/styles/base-maia/spinner-example.json
index 6297891b92..ef0f24fc67 100644
--- a/apps/v4/public/r/styles/base-maia/spinner-example.json
+++ b/apps/v4/public/r/styles/base-maia/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/spinner.json b/apps/v4/public/r/styles/base-maia/spinner.json
index 831eac2651..5b714ff138 100644
--- a/apps/v4/public/r/styles/base-maia/spinner.json
+++ b/apps/v4/public/r/styles/base-maia/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/table-example.json b/apps/v4/public/r/styles/base-maia/table-example.json
index fefd289f72..10e0416d49 100644
--- a/apps/v4/public/r/styles/base-maia/table-example.json
+++ b/apps/v4/public/r/styles/base-maia/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/table-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tabs-example.json b/apps/v4/public/r/styles/base-maia/tabs-example.json
index 0bec718ff8..76c5daa934 100644
--- a/apps/v4/public/r/styles/base-maia/tabs-example.json
+++ b/apps/v4/public/r/styles/base-maia/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/toggle-example.json b/apps/v4/public/r/styles/base-maia/toggle-example.json
index 0555fc838b..bac2594d0a 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-example.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 6cb283f687..881f89f5cc 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/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\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          />\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          />\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tooltip-example.json b/apps/v4/public/r/styles/base-maia/tooltip-example.json
index 44f2fd5718..4d434d27f3 100644
--- a/apps/v4/public/r/styles/base-maia/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-maia/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/vercel.json b/apps/v4/public/r/styles/base-maia/vercel.json
index 52822c74fd..1d9e689cfa 100644
--- a/apps/v4/public/r/styles/base-maia/vercel.json
+++ b/apps/v4/public/r/styles/base-maia/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/accordion-example.json b/apps/v4/public/r/styles/base-mira/accordion-example.json
index 8aa785de4d..af401a1a66 100644
--- a/apps/v4/public/r/styles/base-mira/accordion-example.json
+++ b/apps/v4/public/r/styles/base-mira/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/accordion.json b/apps/v4/public/r/styles/base-mira/accordion.json
index edd46233be..58fb5dcfef 100644
--- a/apps/v4/public/r/styles/base-mira/accordion.json
+++ b/apps/v4/public/r/styles/base-mira/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-md border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-md border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/alert-dialog-example.json b/apps/v4/public/r/styles/base-mira/alert-dialog-example.json
index 21de4736e7..eea9a1c2a1 100644
--- a/apps/v4/public/r/styles/base-mira/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/base-mira/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/alert-example.json b/apps/v4/public/r/styles/base-mira/alert-example.json
index f0d061046e..797ba16490 100644
--- a/apps/v4/public/r/styles/base-mira/alert-example.json
+++ b/apps/v4/public/r/styles/base-mira/alert-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/avatar-example.json b/apps/v4/public/r/styles/base-mira/avatar-example.json
index 38c72a3685..35b5adfe16 100644
--- a/apps/v4/public/r/styles/base-mira/avatar-example.json
+++ b/apps/v4/public/r/styles/base-mira/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/badge-example.json b/apps/v4/public/r/styles/base-mira/badge-example.json
index 0a4c473da1..0a0690e7bd 100644
--- a/apps/v4/public/r/styles/base-mira/badge-example.json
+++ b/apps/v4/public/r/styles/base-mira/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/breadcrumb.json b/apps/v4/public/r/styles/base-mira/breadcrumb.json
index f5706bd7fc..77333e47c0 100644
--- a/apps/v4/public/r/styles/base-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-mira/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-example.json b/apps/v4/public/r/styles/base-mira/button-example.json
index b150b1a757..5d9ca53129 100644
--- a/apps/v4/public/r/styles/base-mira/button-example.json
+++ b/apps/v4/public/r/styles/base-mira/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-group-example.json b/apps/v4/public/r/styles/base-mira/button-group-example.json
index 4ca996c980..cda9c6785d 100644
--- a/apps/v4/public/r/styles/base-mira/button-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar-example.json b/apps/v4/public/r/styles/base-mira/calendar-example.json
index 6e9fd772a3..90c7ac4e88 100644
--- a/apps/v4/public/r/styles/base-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/base-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar.json b/apps/v4/public/r/styles/base-mira/calendar.json
index 19273a1f7b..f9d741e299 100644
--- a/apps/v4/public/r/styles/base-mira/calendar.json
+++ b/apps/v4/public/r/styles/base-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/card-example.json b/apps/v4/public/r/styles/base-mira/card-example.json
index c634bb0b12..fa05dca739 100644
--- a/apps/v4/public/r/styles/base-mira/card-example.json
+++ b/apps/v4/public/r/styles/base-mira/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/carousel.json b/apps/v4/public/r/styles/base-mira/carousel.json
index 515d0d65a9..2db3bacb57 100644
--- a/apps/v4/public/r/styles/base-mira/carousel.json
+++ b/apps/v4/public/r/styles/base-mira/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/chart-example.json b/apps/v4/public/r/styles/base-mira/chart-example.json
index 3f946847ae..e8ac501caf 100644
--- a/apps/v4/public/r/styles/base-mira/chart-example.json
+++ b/apps/v4/public/r/styles/base-mira/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/chatgpt.json b/apps/v4/public/r/styles/base-mira/chatgpt.json
index 54d9d0cab6..7cc717a7cb 100644
--- a/apps/v4/public/r/styles/base-mira/chatgpt.json
+++ b/apps/v4/public/r/styles/base-mira/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/checkbox.json b/apps/v4/public/r/styles/base-mira/checkbox.json
index 3846962af9..31525e4b16 100644
--- a/apps/v4/public/r/styles/base-mira/checkbox.json
+++ b/apps/v4/public/r/styles/base-mira/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/collapsible-example.json b/apps/v4/public/r/styles/base-mira/collapsible-example.json
index d8d3d4149d..3e4e05f8c6 100644
--- a/apps/v4/public/r/styles/base-mira/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-mira/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/combobox-example.json b/apps/v4/public/r/styles/base-mira/combobox-example.json
index 9e7149c049..c74954eb58 100644
--- a/apps/v4/public/r/styles/base-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/base-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/combobox.json b/apps/v4/public/r/styles/base-mira/combobox.json
index fd87b78754..3df684aa22 100644
--- a/apps/v4/public/r/styles/base-mira/combobox.json
+++ b/apps/v4/public/r/styles/base-mira/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-3.5 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-3.5 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/command-example.json b/apps/v4/public/r/styles/base-mira/command-example.json
index 7076a9224a..0088933ba8 100644
--- a/apps/v4/public/r/styles/base-mira/command-example.json
+++ b/apps/v4/public/r/styles/base-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/command.json b/apps/v4/public/r/styles/base-mira/command.json
index a80a36fe9f..30f0fa4ece 100644
--- a/apps/v4/public/r/styles/base-mira/command.json
+++ b/apps/v4/public/r/styles/base-mira/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/component-example.json b/apps/v4/public/r/styles/base-mira/component-example.json
index 1e0124bb78..d7cffcabc0 100644
--- a/apps/v4/public/r/styles/base-mira/component-example.json
+++ b/apps/v4/public/r/styles/base-mira/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/context-menu-example.json b/apps/v4/public/r/styles/base-mira/context-menu-example.json
index 52e0576ba3..430f6cc963 100644
--- a/apps/v4/public/r/styles/base-mira/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/context-menu.json b/apps/v4/public/r/styles/base-mira/context-menu.json
index 7d230c5f19..ec4500bc43 100644
--- a/apps/v4/public/r/styles/base-mira/context-menu.json
+++ b/apps/v4/public/r/styles/base-mira/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dialog-example.json b/apps/v4/public/r/styles/base-mira/dialog-example.json
index 1a89b25197..9a624d4b76 100644
--- a/apps/v4/public/r/styles/base-mira/dialog-example.json
+++ b/apps/v4/public/r/styles/base-mira/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dialog.json b/apps/v4/public/r/styles/base-mira/dialog.json
index c55392a75a..00755ed038 100644
--- a/apps/v4/public/r/styles/base-mira/dialog.json
+++ b/apps/v4/public/r/styles/base-mira/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
index 5d958f0fda..470cded374 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu.json b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
index 0cb2e63798..ece07a3b6c 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/empty-example.json b/apps/v4/public/r/styles/base-mira/empty-example.json
index 63cd62c3dd..9c7f6464e6 100644
--- a/apps/v4/public/r/styles/base-mira/empty-example.json
+++ b/apps/v4/public/r/styles/base-mira/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/github.json b/apps/v4/public/r/styles/base-mira/github.json
index 82dc2aa40f..758cd9aedd 100644
--- a/apps/v4/public/r/styles/base-mira/github.json
+++ b/apps/v4/public/r/styles/base-mira/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-group-example.json b/apps/v4/public/r/styles/base-mira/input-group-example.json
index 02b59c1972..2bf3bc6971 100644
--- a/apps/v4/public/r/styles/base-mira/input-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-otp-example.json b/apps/v4/public/r/styles/base-mira/input-otp-example.json
index 2ca6ed325d..45ef85c970 100644
--- a/apps/v4/public/r/styles/base-mira/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-otp.json b/apps/v4/public/r/styles/base-mira/input-otp.json
index 3a04403fb0..7e8c2255ae 100644
--- a/apps/v4/public/r/styles/base-mira/input-otp.json
+++ b/apps/v4/public/r/styles/base-mira/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/item-example.json b/apps/v4/public/r/styles/base-mira/item-example.json
index b41e1006c7..71aa2bbb95 100644
--- a/apps/v4/public/r/styles/base-mira/item-example.json
+++ b/apps/v4/public/r/styles/base-mira/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/kbd-example.json b/apps/v4/public/r/styles/base-mira/kbd-example.json
index c629fc418e..bb4e00df8a 100644
--- a/apps/v4/public/r/styles/base-mira/kbd-example.json
+++ b/apps/v4/public/r/styles/base-mira/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/menubar-example.json b/apps/v4/public/r/styles/base-mira/menubar-example.json
index 05e98a350c..e0fd218a31 100644
--- a/apps/v4/public/r/styles/base-mira/menubar-example.json
+++ b/apps/v4/public/r/styles/base-mira/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/menubar.json b/apps/v4/public/r/styles/base-mira/menubar.json
index 94b62516d3..ca72c60b24 100644
--- a/apps/v4/public/r/styles/base-mira/menubar.json
+++ b/apps/v4/public/r/styles/base-mira/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-md border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-md border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/native-select.json b/apps/v4/public/r/styles/base-mira/native-select.json
index 25355de740..41a9f23c1f 100644
--- a/apps/v4/public/r/styles/base-mira/native-select.json
+++ b/apps/v4/public/r/styles/base-mira/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/navigation-menu-example.json b/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
index 547efdf92c..4e3c6cd701 100644
--- a/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/navigation-menu.json b/apps/v4/public/r/styles/base-mira/navigation-menu.json
index e3e879c5be..76680a96cf 100644
--- a/apps/v4/public/r/styles/base-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-mira/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/pagination.json b/apps/v4/public/r/styles/base-mira/pagination.json
index f3c6b3269c..aaa1fdb6f2 100644
--- a/apps/v4/public/r/styles/base-mira/pagination.json
+++ b/apps/v4/public/r/styles/base-mira/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/preview.json b/apps/v4/public/r/styles/base-mira/preview.json
index f6df760d5d..c7392ff8a4 100644
--- a/apps/v4/public/r/styles/base-mira/preview.json
+++ b/apps/v4/public/r/styles/base-mira/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/progress-example.json b/apps/v4/public/r/styles/base-mira/progress-example.json
index 7d7c7f569b..1d9d23b07b 100644
--- a/apps/v4/public/r/styles/base-mira/progress-example.json
+++ b/apps/v4/public/r/styles/base-mira/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/radio-group.json b/apps/v4/public/r/styles/base-mira/radio-group.json
index 22d698a891..4f10fab826 100644
--- a/apps/v4/public/r/styles/base-mira/radio-group.json
+++ b/apps/v4/public/r/styles/base-mira/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/select-example.json b/apps/v4/public/r/styles/base-mira/select-example.json
index 94132f22e1..3c3717321d 100644
--- a/apps/v4/public/r/styles/base-mira/select-example.json
+++ b/apps/v4/public/r/styles/base-mira/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/select.json b/apps/v4/public/r/styles/base-mira/select.json
index b8f22c1e78..0dabaa4980 100644
--- a/apps/v4/public/r/styles/base-mira/select.json
+++ b/apps/v4/public/r/styles/base-mira/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            className=\"text-muted-foreground size-3.5 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-3.5 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sheet.json b/apps/v4/public/r/styles/base-mira/sheet.json
index 5e2dd25d62..36ca6ef595 100644
--- a/apps/v4/public/r/styles/base-mira/sheet.json
+++ b/apps/v4/public/r/styles/base-mira/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-example.json b/apps/v4/public/r/styles/base-mira/sidebar-example.json
index 890914c751..07224f1144 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json b/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
index ddc892ecd4..5e5358361c 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
index 93197cd16e..7a0c3e0b93 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json b/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
index 7be0a1d32b..f1f71cfc31 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar.json b/apps/v4/public/r/styles/base-mira/sidebar.json
index 360fec5edc..f205858f7d 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sonner.json b/apps/v4/public/r/styles/base-mira/sonner.json
index abaf7a768b..feff6a07de 100644
--- a/apps/v4/public/r/styles/base-mira/sonner.json
+++ b/apps/v4/public/r/styles/base-mira/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/spinner-example.json b/apps/v4/public/r/styles/base-mira/spinner-example.json
index e365801938..b6e29e8b58 100644
--- a/apps/v4/public/r/styles/base-mira/spinner-example.json
+++ b/apps/v4/public/r/styles/base-mira/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/spinner.json b/apps/v4/public/r/styles/base-mira/spinner.json
index 8c8029d89e..20542b3996 100644
--- a/apps/v4/public/r/styles/base-mira/spinner.json
+++ b/apps/v4/public/r/styles/base-mira/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/table-example.json b/apps/v4/public/r/styles/base-mira/table-example.json
index 79e509db07..8b5b8222f3 100644
--- a/apps/v4/public/r/styles/base-mira/table-example.json
+++ b/apps/v4/public/r/styles/base-mira/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/table-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tabs-example.json b/apps/v4/public/r/styles/base-mira/tabs-example.json
index bd05e6e1f6..4de988be91 100644
--- a/apps/v4/public/r/styles/base-mira/tabs-example.json
+++ b/apps/v4/public/r/styles/base-mira/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/toggle-example.json b/apps/v4/public/r/styles/base-mira/toggle-example.json
index 6eda285b4c..92105cf68b 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-example.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 ffd531c9fc..795e595d6b 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/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\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          />\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          />\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tooltip-example.json b/apps/v4/public/r/styles/base-mira/tooltip-example.json
index 2e4b5dae27..aa89e0c282 100644
--- a/apps/v4/public/r/styles/base-mira/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-mira/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/vercel.json b/apps/v4/public/r/styles/base-mira/vercel.json
index 307b99a1f4..6107f09fb7 100644
--- a/apps/v4/public/r/styles/base-mira/vercel.json
+++ b/apps/v4/public/r/styles/base-mira/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/accordion-example.json b/apps/v4/public/r/styles/base-nova/accordion-example.json
index 719c5a3caf..c25643e5a9 100644
--- a/apps/v4/public/r/styles/base-nova/accordion-example.json
+++ b/apps/v4/public/r/styles/base-nova/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/accordion.json b/apps/v4/public/r/styles/base-nova/accordion.json
index 2f352f9198..1cbe9c7836 100644
--- a/apps/v4/public/r/styles/base-nova/accordion.json
+++ b/apps/v4/public/r/styles/base-nova/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/alert-dialog-example.json b/apps/v4/public/r/styles/base-nova/alert-dialog-example.json
index 9041b7936c..05604242ff 100644
--- a/apps/v4/public/r/styles/base-nova/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/base-nova/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/alert-example.json b/apps/v4/public/r/styles/base-nova/alert-example.json
index 7549396019..94f71d1678 100644
--- a/apps/v4/public/r/styles/base-nova/alert-example.json
+++ b/apps/v4/public/r/styles/base-nova/alert-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/avatar-example.json b/apps/v4/public/r/styles/base-nova/avatar-example.json
index c19e1b4f81..f3a6c93a32 100644
--- a/apps/v4/public/r/styles/base-nova/avatar-example.json
+++ b/apps/v4/public/r/styles/base-nova/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/badge-example.json b/apps/v4/public/r/styles/base-nova/badge-example.json
index 45e16fd6ca..f3805133a8 100644
--- a/apps/v4/public/r/styles/base-nova/badge-example.json
+++ b/apps/v4/public/r/styles/base-nova/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/breadcrumb.json b/apps/v4/public/r/styles/base-nova/breadcrumb.json
index 0e9da2a5ea..d3f1307be0 100644
--- a/apps/v4/public/r/styles/base-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-nova/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-example.json b/apps/v4/public/r/styles/base-nova/button-example.json
index 2c5503c609..5e5e81e131 100644
--- a/apps/v4/public/r/styles/base-nova/button-example.json
+++ b/apps/v4/public/r/styles/base-nova/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-group-example.json b/apps/v4/public/r/styles/base-nova/button-group-example.json
index 0d98559216..b8cc61071c 100644
--- a/apps/v4/public/r/styles/base-nova/button-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar-example.json b/apps/v4/public/r/styles/base-nova/calendar-example.json
index ac7ddca757..5d93193abf 100644
--- a/apps/v4/public/r/styles/base-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/base-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar.json b/apps/v4/public/r/styles/base-nova/calendar.json
index 77e3484e48..71901bcf9d 100644
--- a/apps/v4/public/r/styles/base-nova/calendar.json
+++ b/apps/v4/public/r/styles/base-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/card-example.json b/apps/v4/public/r/styles/base-nova/card-example.json
index 15ba09b228..43a0c4aeea 100644
--- a/apps/v4/public/r/styles/base-nova/card-example.json
+++ b/apps/v4/public/r/styles/base-nova/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/carousel.json b/apps/v4/public/r/styles/base-nova/carousel.json
index 978193c362..d7e89ce022 100644
--- a/apps/v4/public/r/styles/base-nova/carousel.json
+++ b/apps/v4/public/r/styles/base-nova/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/chart-example.json b/apps/v4/public/r/styles/base-nova/chart-example.json
index 0140efee0f..e0711026ad 100644
--- a/apps/v4/public/r/styles/base-nova/chart-example.json
+++ b/apps/v4/public/r/styles/base-nova/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/chatgpt.json b/apps/v4/public/r/styles/base-nova/chatgpt.json
index 8083f57a34..164e9d4dc6 100644
--- a/apps/v4/public/r/styles/base-nova/chatgpt.json
+++ b/apps/v4/public/r/styles/base-nova/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/checkbox.json b/apps/v4/public/r/styles/base-nova/checkbox.json
index bd7f835040..1e58ddd289 100644
--- a/apps/v4/public/r/styles/base-nova/checkbox.json
+++ b/apps/v4/public/r/styles/base-nova/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/collapsible-example.json b/apps/v4/public/r/styles/base-nova/collapsible-example.json
index 61863a7dcb..3be55bbb7c 100644
--- a/apps/v4/public/r/styles/base-nova/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-nova/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/combobox-example.json b/apps/v4/public/r/styles/base-nova/combobox-example.json
index 43ae5bcffd..1c713d1236 100644
--- a/apps/v4/public/r/styles/base-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/base-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/combobox.json b/apps/v4/public/r/styles/base-nova/combobox.json
index 12d33d9ffb..9e64665b6b 100644
--- a/apps/v4/public/r/styles/base-nova/combobox.json
+++ b/apps/v4/public/r/styles/base-nova/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/command-example.json b/apps/v4/public/r/styles/base-nova/command-example.json
index 36146ca7aa..22fb0e188c 100644
--- a/apps/v4/public/r/styles/base-nova/command-example.json
+++ b/apps/v4/public/r/styles/base-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/command.json b/apps/v4/public/r/styles/base-nova/command.json
index 726bc00ad4..0cd6ae703c 100644
--- a/apps/v4/public/r/styles/base-nova/command.json
+++ b/apps/v4/public/r/styles/base-nova/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/component-example.json b/apps/v4/public/r/styles/base-nova/component-example.json
index a187482f11..2c81276e2c 100644
--- a/apps/v4/public/r/styles/base-nova/component-example.json
+++ b/apps/v4/public/r/styles/base-nova/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/context-menu-example.json b/apps/v4/public/r/styles/base-nova/context-menu-example.json
index d36da2957c..8b31dd6cb8 100644
--- a/apps/v4/public/r/styles/base-nova/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/context-menu.json b/apps/v4/public/r/styles/base-nova/context-menu.json
index a04adb37a5..7245a06b70 100644
--- a/apps/v4/public/r/styles/base-nova/context-menu.json
+++ b/apps/v4/public/r/styles/base-nova/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dialog-example.json b/apps/v4/public/r/styles/base-nova/dialog-example.json
index 89af882dc1..079e700799 100644
--- a/apps/v4/public/r/styles/base-nova/dialog-example.json
+++ b/apps/v4/public/r/styles/base-nova/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dialog.json b/apps/v4/public/r/styles/base-nova/dialog.json
index 336d041571..52e7b72ca8 100644
--- a/apps/v4/public/r/styles/base-nova/dialog.json
+++ b/apps/v4/public/r/styles/base-nova/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
index ca12586d45..36d58cea27 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu.json b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
index 6e8bf7616e..63f310e461 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/empty-example.json b/apps/v4/public/r/styles/base-nova/empty-example.json
index 4a234abd50..675d2f2c2f 100644
--- a/apps/v4/public/r/styles/base-nova/empty-example.json
+++ b/apps/v4/public/r/styles/base-nova/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/github.json b/apps/v4/public/r/styles/base-nova/github.json
index 480e16cfbe..9accde741f 100644
--- a/apps/v4/public/r/styles/base-nova/github.json
+++ b/apps/v4/public/r/styles/base-nova/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-group-example.json b/apps/v4/public/r/styles/base-nova/input-group-example.json
index 570f2d2dde..abc0d06cb7 100644
--- a/apps/v4/public/r/styles/base-nova/input-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-otp-example.json b/apps/v4/public/r/styles/base-nova/input-otp-example.json
index d03f0a5da8..42d9ec92f7 100644
--- a/apps/v4/public/r/styles/base-nova/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-otp.json b/apps/v4/public/r/styles/base-nova/input-otp.json
index 62959fef35..5c7ffd41c2 100644
--- a/apps/v4/public/r/styles/base-nova/input-otp.json
+++ b/apps/v4/public/r/styles/base-nova/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/item-example.json b/apps/v4/public/r/styles/base-nova/item-example.json
index 4352448585..ba43576e82 100644
--- a/apps/v4/public/r/styles/base-nova/item-example.json
+++ b/apps/v4/public/r/styles/base-nova/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/kbd-example.json b/apps/v4/public/r/styles/base-nova/kbd-example.json
index 01e7838bbf..8be5d80e2d 100644
--- a/apps/v4/public/r/styles/base-nova/kbd-example.json
+++ b/apps/v4/public/r/styles/base-nova/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/menubar-example.json b/apps/v4/public/r/styles/base-nova/menubar-example.json
index 7dcf4eead5..9507283112 100644
--- a/apps/v4/public/r/styles/base-nova/menubar-example.json
+++ b/apps/v4/public/r/styles/base-nova/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/menubar.json b/apps/v4/public/r/styles/base-nova/menubar.json
index 02d01efbd1..feff71aa87 100644
--- a/apps/v4/public/r/styles/base-nova/menubar.json
+++ b/apps/v4/public/r/styles/base-nova/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/native-select.json b/apps/v4/public/r/styles/base-nova/native-select.json
index 87bdb99d17..6445bbbdee 100644
--- a/apps/v4/public/r/styles/base-nova/native-select.json
+++ b/apps/v4/public/r/styles/base-nova/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/navigation-menu-example.json b/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
index 82a95cb91c..b1e1cf922b 100644
--- a/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/navigation-menu.json b/apps/v4/public/r/styles/base-nova/navigation-menu.json
index 09a2655431..ff4cf1e392 100644
--- a/apps/v4/public/r/styles/base-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-nova/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/pagination.json b/apps/v4/public/r/styles/base-nova/pagination.json
index 7169d9ad42..b01aca8c2b 100644
--- a/apps/v4/public/r/styles/base-nova/pagination.json
+++ b/apps/v4/public/r/styles/base-nova/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/preview.json b/apps/v4/public/r/styles/base-nova/preview.json
index 365c6fae5b..12bd927ccd 100644
--- a/apps/v4/public/r/styles/base-nova/preview.json
+++ b/apps/v4/public/r/styles/base-nova/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/progress-example.json b/apps/v4/public/r/styles/base-nova/progress-example.json
index d4001ab6b6..fc21ea4336 100644
--- a/apps/v4/public/r/styles/base-nova/progress-example.json
+++ b/apps/v4/public/r/styles/base-nova/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/radio-group.json b/apps/v4/public/r/styles/base-nova/radio-group.json
index 414bcf2128..78d6d342fc 100644
--- a/apps/v4/public/r/styles/base-nova/radio-group.json
+++ b/apps/v4/public/r/styles/base-nova/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/select-example.json b/apps/v4/public/r/styles/base-nova/select-example.json
index 681f518224..defdde47d1 100644
--- a/apps/v4/public/r/styles/base-nova/select-example.json
+++ b/apps/v4/public/r/styles/base-nova/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/select.json b/apps/v4/public/r/styles/base-nova/select.json
index 73cb41daa2..97e1094449 100644
--- a/apps/v4/public/r/styles/base-nova/select.json
+++ b/apps/v4/public/r/styles/base-nova/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sheet.json b/apps/v4/public/r/styles/base-nova/sheet.json
index 1923dd1021..946c63e1a8 100644
--- a/apps/v4/public/r/styles/base-nova/sheet.json
+++ b/apps/v4/public/r/styles/base-nova/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-example.json b/apps/v4/public/r/styles/base-nova/sidebar-example.json
index 893dae649f..1552528a2d 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json b/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
index b03a02e95a..f2a875d8e1 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
index f7a64fa50b..e61b5664e9 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json b/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
index bb3150efff..4932624761 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar.json b/apps/v4/public/r/styles/base-nova/sidebar.json
index eb386ecbae..d78e56f208 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sonner.json b/apps/v4/public/r/styles/base-nova/sonner.json
index abba632bdd..7f86c42949 100644
--- a/apps/v4/public/r/styles/base-nova/sonner.json
+++ b/apps/v4/public/r/styles/base-nova/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/spinner-example.json b/apps/v4/public/r/styles/base-nova/spinner-example.json
index 5b7112e4b5..b757bd0232 100644
--- a/apps/v4/public/r/styles/base-nova/spinner-example.json
+++ b/apps/v4/public/r/styles/base-nova/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/spinner.json b/apps/v4/public/r/styles/base-nova/spinner.json
index 79b33ab192..b010a308a1 100644
--- a/apps/v4/public/r/styles/base-nova/spinner.json
+++ b/apps/v4/public/r/styles/base-nova/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/table-example.json b/apps/v4/public/r/styles/base-nova/table-example.json
index 18d012bace..ba66b59293 100644
--- a/apps/v4/public/r/styles/base-nova/table-example.json
+++ b/apps/v4/public/r/styles/base-nova/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/table-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tabs-example.json b/apps/v4/public/r/styles/base-nova/tabs-example.json
index c9e7a85688..32b7a60581 100644
--- a/apps/v4/public/r/styles/base-nova/tabs-example.json
+++ b/apps/v4/public/r/styles/base-nova/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/toggle-example.json b/apps/v4/public/r/styles/base-nova/toggle-example.json
index f3b3dca884..10ea0d6f6c 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-example.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 2a32c052a9..5807c140ae 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/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\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          />\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          />\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tooltip-example.json b/apps/v4/public/r/styles/base-nova/tooltip-example.json
index 612a11bdf5..3230afab85 100644
--- a/apps/v4/public/r/styles/base-nova/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-nova/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/vercel.json b/apps/v4/public/r/styles/base-nova/vercel.json
index fbe29d12f2..0a0ffa36da 100644
--- a/apps/v4/public/r/styles/base-nova/vercel.json
+++ b/apps/v4/public/r/styles/base-nova/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/accordion-example.json b/apps/v4/public/r/styles/base-vega/accordion-example.json
index a3dc23bef1..9a5228a2e0 100644
--- a/apps/v4/public/r/styles/base-vega/accordion-example.json
+++ b/apps/v4/public/r/styles/base-vega/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/base/ui/accordion\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/accordion.json b/apps/v4/public/r/styles/base-vega/accordion.json
index 3af1fbc2cd..f4034be44f 100644
--- a/apps/v4/public/r/styles/base-vega/accordion.json
+++ b/apps/v4/public/r/styles/base-vega/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/alert-dialog-example.json b/apps/v4/public/r/styles/base-vega/alert-dialog-example.json
index 041e26b675..c02ef4d747 100644
--- a/apps/v4/public/r/styles/base-vega/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/base-vega/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button variant=\"outline\">Small</Button>} />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Default (Media)</Button>}\n        />\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"outline\">Small (Media)</Button>}\n        />\n\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger\n          render={<Button variant=\"destructive\">Delete Chat</Button>}\n        />\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Open Alert Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/alert-example.json b/apps/v4/public/r/styles/base-vega/alert-example.json
index 32b29b2e93..d1dd276aaf 100644
--- a/apps/v4/public/r/styles/base-vega/alert-example.json
+++ b/apps/v4/public/r/styles/base-vega/alert-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/avatar-example.json b/apps/v4/public/r/styles/base-vega/avatar-example.json
index 9a49f610d1..7772b51ead 100644
--- a/apps/v4/public/r/styles/base-vega/avatar-example.json
+++ b/apps/v4/public/r/styles/base-vega/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/badge-example.json b/apps/v4/public/r/styles/base-vega/badge-example.json
index 505363c3c9..430f5f568f 100644
--- a/apps/v4/public/r/styles/base-vega/badge-example.json
+++ b/apps/v4/public/r/styles/base-vega/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"secondary\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"destructive\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRightIcon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n        <Badge\n          variant=\"ghost\"\n          render={\n            <a href=\"#\">\n              Link{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n                data-icon=\"inline-end\"\n              />\n            </a>\n          }\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/breadcrumb.json b/apps/v4/public/r/styles/base-vega/breadcrumb.json
index 3cc4146b69..e752ecb612 100644
--- a/apps/v4/public/r/styles/base-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-vega/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-example.json b/apps/v4/public/r/styles/base-vega/button-example.json
index 8d7d1c2cb7..57d87ddd27 100644
--- a/apps/v4/public/r/styles/base-vega/button-example.json
+++ b/apps/v4/public/r/styles/base-vega/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <Button render={<a href=\"#\" />} nativeButton={false}>\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-group-example.json b/apps/v4/public/r/styles/base-vega/button-group-example.json
index a7ac8f5a8f..6e3b9a54f3 100644
--- a/apps/v4/public/r/styles/base-vega/button-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText render={<Label htmlFor=\"input-text\" />}>\n            GPU Size\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeX\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nconst currencyItems = [\n  { label: \"$\", value: \"$\" },\n  { label: \"€\", value: \"€\" },\n  { label: \"£\", value: \"£\" },\n]\n\nfunction ButtonGroupWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select items={currencyItems} defaultValue={currencyItems[0]}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {currencyItems.map((item) => (\n                  <SelectItem key={item.value} value={item}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          className=\"w-12\"\n          render={<span />}\n          nativeButton={false}\n        >\n          1.2K\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nconst durationItems = [\n  { label: \"Hours\", value: \"hours\" },\n  { label: \"Days\", value: \"days\" },\n  { label: \"Weeks\", value: \"weeks\" },\n]\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select items={durationItems} defaultValue={durationItems[0]}>\n          <SelectTrigger id=\"duration\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectGroup>\n              {durationItems.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger render={<InputGroupAddon align=\"inline-end\" />}>\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconHeadphones\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft02Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar-example.json b/apps/v4/public/r/styles/base-vega/calendar-example.json
index 09d06e5433..ae0933979d 100644
--- a/apps/v4/public/r/styles/base-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/base-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/base/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar.json b/apps/v4/public/r/styles/base-vega/calendar.json
index f9f5061a4b..cc750f4095 100644
--- a/apps/v4/public/r/styles/base-vega/calendar.json
+++ b/apps/v4/public/r/styles/base-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/card-example.json b/apps/v4/public/r/styles/base-vega/card-example.json
index d8af207ae4..e165413104 100644
--- a/apps/v4/public/r/styles/base-vega/card-example.json
+++ b/apps/v4/public/r/styles/base-vega/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/carousel.json b/apps/v4/public/r/styles/base-vega/carousel.json
index 75cdb2765b..14f66fcbab 100644
--- a/apps/v4/public/r/styles/base-vega/carousel.json
+++ b/apps/v4/public/r/styles/base-vega/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/chart-example.json b/apps/v4/public/r/styles/base-vega/chart-example.json
index d04d841a53..39ce50f1f0 100644
--- a/apps/v4/public/r/styles/base-vega/chart-example.json
+++ b/apps/v4/public/r/styles/base-vega/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/chatgpt.json b/apps/v4/public/r/styles/base-vega/chatgpt.json
index ef9ae5660b..9c02356a77 100644
--- a/apps/v4/public/r/styles/base-vega/chatgpt.json
+++ b/apps/v4/public/r/styles/base-vega/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/checkbox.json b/apps/v4/public/r/styles/base-vega/checkbox.json
index 87068fe481..d49d6926eb 100644
--- a/apps/v4/public/r/styles/base-vega/checkbox.json
+++ b/apps/v4/public/r/styles/base-vega/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/collapsible-example.json b/apps/v4/public/r/styles/base-vega/collapsible-example.json
index 9ef4388afa..1830ef35c3 100644
--- a/apps/v4/public/r/styles/base-vega/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-vega/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/combobox-example.json b/apps/v4/public/r/styles/base-vega/combobox-example.json
index e34c3ca360..99782742f9 100644
--- a/apps/v4/public/r/styles/base-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/base-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/combobox.json b/apps/v4/public/r/styles/base-vega/combobox.json
index 5d6631366b..9a649963c0 100644
--- a/apps/v4/public/r/styles/base-vega/combobox.json
+++ b/apps/v4/public/r/styles/base-vega/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/command-example.json b/apps/v4/public/r/styles/base-vega/command-example.json
index c8dd4a9589..fd1566a208 100644
--- a/apps/v4/public/r/styles/base-vega/command-example.json
+++ b/apps/v4/public/r/styles/base-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/base/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/command.json b/apps/v4/public/r/styles/base-vega/command.json
index a153b653d2..fda9227e8f 100644
--- a/apps/v4/public/r/styles/base-vega/command.json
+++ b/apps/v4/public/r/styles/base-vega/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/component-example.json b/apps/v4/public/r/styles/base-vega/component-example.json
index f7604b3cda..63c23d3c86 100644
--- a/apps/v4/public/r/styles/base-vega/component-example.json
+++ b/apps/v4/public/r/styles/base-vega/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/context-menu-example.json b/apps/v4/public/r/styles/base-vega/context-menu-example.json
index 90100876bb..5885ec055b 100644
--- a/apps/v4/public/r/styles/base-vega/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/base/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem defaultChecked>\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/context-menu.json b/apps/v4/public/r/styles/base-vega/context-menu.json
index 37ec46aba0..74b76f29a4 100644
--- a/apps/v4/public/r/styles/base-vega/context-menu.json
+++ b/apps/v4/public/r/styles/base-vega/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dialog-example.json b/apps/v4/public/r/styles/base-vega/dialog-example.json
index 372469ee30..94c37e3b73 100644
--- a/apps/v4/public/r/styles/base-vega/dialog-example.json
+++ b/apps/v4/public/r/styles/base-vega/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dialog.json b/apps/v4/public/r/styles/base-vega/dialog.json
index 4c233d38da..f1606071be 100644
--- a/apps/v4/public/r/styles/base-vega/dialog.json
+++ b/apps/v4/public/r/styles/base-vega/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
index b3818652c5..4aee366056 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu.json b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
index ff35c21419..3446ad7115 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/empty-example.json b/apps/v4/public/r/styles/base-vega/empty-example.json
index c80adecd91..d4bd64b18c 100644
--- a/apps/v4/public/r/styles/base-vega/empty-example.json
+++ b/apps/v4/public/r/styles/base-vega/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            className=\"text-muted-foreground\"\n            nativeButton={false}\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/github.json b/apps/v4/public/r/styles/base-vega/github.json
index 2379c4b581..dd038e89e9 100644
--- a/apps/v4/public/r/styles/base-vega/github.json
+++ b/apps/v4/public/r/styles/base-vega/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/base/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/base/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-group-example.json b/apps/v4/public/r/styles/base-vega/input-group-example.json
index e714b5803c..9590f48c9e 100644
--- a/apps/v4/public/r/styles/base-vega/input-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-otp-example.json b/apps/v4/public/r/styles/base-vega/input-otp-example.json
index c38658ab2e..d27e10b037 100644
--- a/apps/v4/public/r/styles/base-vega/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/base/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-otp.json b/apps/v4/public/r/styles/base-vega/input-otp.json
index 45fe22cdc4..8e804400cc 100644
--- a/apps/v4/public/r/styles/base-vega/input-otp.json
+++ b/apps/v4/public/r/styles/base-vega/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/item-example.json b/apps/v4/public/r/styles/base-vega/item-example.json
index 207bdfb7bd..de27523e55 100644
--- a/apps/v4/public/r/styles/base-vega/item-example.json
+++ b/apps/v4/public/r/styles/base-vega/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/kbd-example.json b/apps/v4/public/r/styles/base-vega/kbd-example.json
index e5d9a3cf7c..ce2ad760d8 100644
--- a/apps/v4/public/r/styles/base-vega/kbd-example.json
+++ b/apps/v4/public/r/styles/base-vega/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger render={<Button size=\"icon-sm\" variant=\"outline\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/menubar-example.json b/apps/v4/public/r/styles/base-vega/menubar-example.json
index 3d43902683..2df637fd8f 100644
--- a/apps/v4/public/r/styles/base-vega/menubar-example.json
+++ b/apps/v4/public/r/styles/base-vega/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/base/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/menubar.json b/apps/v4/public/r/styles/base-vega/menubar.json
index 7ef5e7c41d..4e881ab07e 100644
--- a/apps/v4/public/r/styles/base-vega/menubar.json
+++ b/apps/v4/public/r/styles/base-vega/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel>) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/native-select.json b/apps/v4/public/r/styles/base-vega/native-select.json
index ec4809902d..5a9c0e9577 100644
--- a/apps/v4/public/r/styles/base-vega/native-select.json
+++ b/apps/v4/public/r/styles/base-vega/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/navigation-menu-example.json b/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
index 963b95aea8..519563f469 100644
--- a/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/base/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/navigation-menu.json b/apps/v4/public/r/styles/base-vega/navigation-menu.json
index 3977ef9ca4..abeddc658e 100644
--- a/apps/v4/public/r/styles/base-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-vega/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuPrimitive.List.Props) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Item.Props) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin)\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Icon.Props) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/pagination.json b/apps/v4/public/r/styles/base-vega/pagination.json
index 6d55817538..719b36d97c 100644
--- a/apps/v4/public/r/styles/base-vega/pagination.json
+++ b/apps/v4/public/r/styles/base-vega/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n      nativeButton={false}\n      render={\n        <a\n          aria-current={isActive ? \"page\" : undefined}\n          data-slot=\"pagination-link\"\n          data-active={isActive}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/preview.json b/apps/v4/public/r/styles/base-vega/preview.json
index 33120a76de..783ddd243b 100644
--- a/apps/v4/public/r/styles/base-vega/preview.json
+++ b/apps/v4/public/r/styles/base-vega/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/base/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/base/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/base/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { Switch } from \"@/registry/bases/base/ui/switch\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/progress-example.json b/apps/v4/public/r/styles/base-vega/progress-example.json
index b4f0b79c0f..9343482085 100644
--- a/apps/v4/public/r/styles/base-vega/progress-example.json
+++ b/apps/v4/public/r/styles/base-vega/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/bases/base/ui/progress\"\nimport { Slider } from \"@/registry/bases/base/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/radio-group.json b/apps/v4/public/r/styles/base-vega/radio-group.json
index c280b0fd71..58b0b42f62 100644
--- a/apps/v4/public/r/styles/base-vega/radio-group.json
+++ b/apps/v4/public/r/styles/base-vega/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/select-example.json b/apps/v4/public/r/styles/base-vega/select-example.json
index 6459b9ac31..9b3efba402 100644
--- a/apps/v4/public/r/styles/base-vega/select-example.json
+++ b/apps/v4/public/r/styles/base-vega/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/base/ui/field\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/select.json b/apps/v4/public/r/styles/base-vega/select.json
index 060f4891c0..db9a3692eb 100644
--- a/apps/v4/public/r/styles/base-vega/select.json
+++ b/apps/v4/public/r/styles/base-vega/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            className=\"text-muted-foreground size-4 pointer-events-none\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sheet.json b/apps/v4/public/r/styles/base-vega/sheet.json
index bffaa4d3d9..516f4e4be0 100644
--- a/apps/v4/public/r/styles/base-vega/sheet.json
+++ b/apps/v4/public/r/styles/base-vega/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-example.json b/apps/v4/public/r/styles/base-vega/sidebar-example.json
index e8d3ca5224..6142716075 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json b/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
index e024a31112..40a3d5fd49 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/base/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
index 47de050066..4201e9040c 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json b/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
index 1f77c02d8b..8c710d8948 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar.json b/apps/v4/public/r/styles/base-vega/sidebar.json
index e2f10931fc..aa2562d853 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/bases/base/lib/utils\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport { Separator } from \"@/registry/bases/base/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/base/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/base/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sonner.json b/apps/v4/public/r/styles/base-vega/sonner.json
index a34c537f44..5ace7c3a3c 100644
--- a/apps/v4/public/r/styles/base-vega/sonner.json
+++ b/apps/v4/public/r/styles/base-vega/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/spinner-example.json b/apps/v4/public/r/styles/base-vega/spinner-example.json
index 0fc85dbd94..f8f104f53e 100644
--- a/apps/v4/public/r/styles/base-vega/spinner-example.json
+++ b/apps/v4/public/r/styles/base-vega/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/base/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button render={<a href=\"#\" />} nativeButton={false}>\n              Create project\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button\n            variant=\"link\"\n            render={<a href=\"#\" />}\n            nativeButton={false}\n            className=\"text-muted-foreground\"\n          >\n            Learn more{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/spinner.json b/apps/v4/public/r/styles/base-vega/spinner.json
index c6e924cea8..facfa0d626 100644
--- a/apps/v4/public/r/styles/base-vega/spinner.json
+++ b/apps/v4/public/r/styles/base-vega/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/base/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/table-example.json b/apps/v4/public/r/styles/base-vega/table-example.json
index c45ebd5eb4..89255e97d8 100644
--- a/apps/v4/public/r/styles/base-vega/table-example.json
+++ b/apps/v4/public/r/styles/base-vega/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/table-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/base/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                  />\n                  <span className=\"sr-only\">Open menu</span>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nconst people = [\n  { value: \"sarah\", label: \"Sarah Chen\" },\n  { value: \"marcus\", label: \"Marc Rodriguez\" },\n  { value: \"emily\", label: \"Emily Watson\" },\n  { value: \"david\", label: \"David Kim\" },\n]\n\nconst tasks = [\n  {\n    task: \"Design homepage\",\n    assignee: \"sarah\",\n    status: \"In Progress\",\n  },\n  {\n    task: \"Implement API\",\n    assignee: \"marcus\",\n    status: \"Pending\",\n  },\n  {\n    task: \"Write tests\",\n    assignee: \"emily\",\n    status: \"Not Started\",\n  },\n]\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {tasks.map((item) => (\n            <TableRow key={item.task}>\n              <TableCell className=\"font-medium\">{item.task}</TableCell>\n              <TableCell>\n                <Select\n                  items={people}\n                  defaultValue={people.find(\n                    (person) => person.value === item.assignee\n                  )}\n                  itemToStringValue={(item) => {\n                    return item.value\n                  }}\n                >\n                  <SelectTrigger className=\"w-40\" size=\"sm\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      {people.map((person) => (\n                        <SelectItem key={person.value} value={person}>\n                          {person.label}\n                        </SelectItem>\n                      ))}\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </TableCell>\n              <TableCell>{item.status}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tabs-example.json b/apps/v4/public/r/styles/base-vega/tabs-example.json
index 3c85d0a56f..7fe4366d5f 100644
--- a/apps/v4/public/r/styles/base-vega/tabs-example.json
+++ b/apps/v4/public/r/styles/base-vega/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/base/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/toggle-example.json b/apps/v4/public/r/styles/base-vega/toggle-example.json
index acbfadddb0..a94fced9cc 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-example.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Toggle } from \"@/registry/bases/base/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 6ff9aba4ff..5c8e870233 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/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Input } from \"@/registry/bases/base/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/base/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/base/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\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          />\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          />\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tooltip-example.json b/apps/v4/public/r/styles/base-vega/tooltip-example.json
index 2fca51075e..049a801d64 100644
--- a/apps/v4/public/r/styles/base-vega/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-vega/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Kbd } from \"@/registry/bases/base/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/base/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/vercel.json b/apps/v4/public/r/styles/base-vega/vercel.json
index 89e4f720e9..c6cf8b38b4 100644
--- a/apps/v4/public/r/styles/base-vega/vercel.json
+++ b/apps/v4/public/r/styles/base-vega/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/base/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/base/ui/alert\"\nimport { Badge } from \"@/registry/bases/base/ui/badge\"\nimport { Button } from \"@/registry/bases/base/ui/button\"\nimport { Calendar } from \"@/registry/bases/base/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/base/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/base/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/base/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/base/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/base/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/base/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/base/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/base/ui/popover\"\nimport { Textarea } from \"@/registry/bases/base/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/accordion-example.json b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
index 849850dad0..8816e2421e 100644
--- a/apps/v4/public/r/styles/radix-lyra/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/accordion.json b/apps/v4/public/r/styles/radix-lyra/accordion.json
index 3b05449ff6..38d9f38fea 100644
--- a/apps/v4/public/r/styles/radix-lyra/accordion.json
+++ b/apps/v4/public/r/styles/radix-lyra/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-xs overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/alert-dialog-example.json b/apps/v4/public/r/styles/radix-lyra/alert-dialog-example.json
index b50e3ab864..4080ad3331 100644
--- a/apps/v4/public/r/styles/radix-lyra/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/alert-example.json b/apps/v4/public/r/styles/radix-lyra/alert-example.json
index ca144004ea..9e89e6a657 100644
--- a/apps/v4/public/r/styles/radix-lyra/alert-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/avatar-example.json b/apps/v4/public/r/styles/radix-lyra/avatar-example.json
index adae1226db..37ac372163 100644
--- a/apps/v4/public/r/styles/radix-lyra/avatar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/badge-example.json b/apps/v4/public/r/styles/radix-lyra/badge-example.json
index 23ed5833c0..dd17aa407f 100644
--- a/apps/v4/public/r/styles/radix-lyra/badge-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
index acd8b5f9c3..35a34fbada 100644
--- a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/button-example.json b/apps/v4/public/r/styles/radix-lyra/button-example.json
index 332b6316c3..5cb942903c 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/button-group-example.json b/apps/v4/public/r/styles/radix-lyra/button-group-example.json
index b2ea408b6a..42dc1bb490 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar-example.json b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
index a7127eae3e..0d2f2800ce 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar.json b/apps/v4/public/r/styles/radix-lyra/calendar.json
index 783f994947..13d8c18cc4 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/card-example.json b/apps/v4/public/r/styles/radix-lyra/card-example.json
index 015baa24b8..3bdab6e269 100644
--- a/apps/v4/public/r/styles/radix-lyra/card-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/carousel.json b/apps/v4/public/r/styles/radix-lyra/carousel.json
index 1a88b0686a..9514239290 100644
--- a/apps/v4/public/r/styles/radix-lyra/carousel.json
+++ b/apps/v4/public/r/styles/radix-lyra/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/chart-example.json b/apps/v4/public/r/styles/radix-lyra/chart-example.json
index 0e112556d8..efcb1eba04 100644
--- a/apps/v4/public/r/styles/radix-lyra/chart-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/chatgpt.json b/apps/v4/public/r/styles/radix-lyra/chatgpt.json
index 9e18f0621a..804164e1f8 100644
--- a/apps/v4/public/r/styles/radix-lyra/chatgpt.json
+++ b/apps/v4/public/r/styles/radix-lyra/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/checkbox.json b/apps/v4/public/r/styles/radix-lyra/checkbox.json
index 7cfd303edc..b9c69bded6 100644
--- a/apps/v4/public/r/styles/radix-lyra/checkbox.json
+++ b/apps/v4/public/r/styles/radix-lyra/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-none border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-1 aria-invalid:ring-1 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/collapsible-example.json b/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
index ddf6791f84..a9d6d9ed50 100644
--- a/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/combobox-example.json b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
index 50b8c37849..b57da6b129 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/combobox.json b/apps/v4/public/r/styles/radix-lyra/combobox.json
index d0302cad54..4f349c4b07 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/command-example.json b/apps/v4/public/r/styles/radix-lyra/command-example.json
index 87fbad4151..773de9e7d1 100644
--- a/apps/v4/public/r/styles/radix-lyra/command-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/command.json b/apps/v4/public/r/styles/radix-lyra/command.json
index c265437788..20830606d7 100644
--- a/apps/v4/public/r/styles/radix-lyra/command.json
+++ b/apps/v4/public/r/styles/radix-lyra/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-none overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-none overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/component-example.json b/apps/v4/public/r/styles/radix-lyra/component-example.json
index efe7226368..feca58b308 100644
--- a/apps/v4/public/r/styles/radix-lyra/component-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/context-menu-example.json b/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
index 25bfa86ec9..0d0b14e8c0 100644
--- a/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/context-menu.json b/apps/v4/public/r/styles/radix-lyra/context-menu.json
index f88443d6e1..5fee5c1aac 100644
--- a/apps/v4/public/r/styles/radix-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dialog-example.json b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
index 0574756c71..364a223986 100644
--- a/apps/v4/public/r/styles/radix-lyra/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dialog.json b/apps/v4/public/r/styles/radix-lyra/dialog.json
index 25728d3e81..84564896bf 100644
--- a/apps/v4/public/r/styles/radix-lyra/dialog.json
+++ b/apps/v4/public/r/styles/radix-lyra/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 text-left flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
index fd78f850b7..efe3943bf4 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
index 072af0abc1..d2e3651d18 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/empty-example.json b/apps/v4/public/r/styles/radix-lyra/empty-example.json
index e7a7bdea6e..659744535f 100644
--- a/apps/v4/public/r/styles/radix-lyra/empty-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/github.json b/apps/v4/public/r/styles/radix-lyra/github.json
index 835a454b9a..35ef71d44e 100644
--- a/apps/v4/public/r/styles/radix-lyra/github.json
+++ b/apps/v4/public/r/styles/radix-lyra/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-group-example.json b/apps/v4/public/r/styles/radix-lyra/input-group-example.json
index 79e9443777..7f566abedf 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
index fbb51b9275..434c8040bb 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-otp.json b/apps/v4/public/r/styles/radix-lyra/input-otp.json
index ceee90db84..5ab35760b3 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-otp.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-none has-aria-invalid:ring-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:ring-1 relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/item-example.json b/apps/v4/public/r/styles/radix-lyra/item-example.json
index e09fcfe005..b231281739 100644
--- a/apps/v4/public/r/styles/radix-lyra/item-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/kbd-example.json b/apps/v4/public/r/styles/radix-lyra/kbd-example.json
index 93e86417cd..18fa561eec 100644
--- a/apps/v4/public/r/styles/radix-lyra/kbd-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/menubar-example.json b/apps/v4/public/r/styles/radix-lyra/menubar-example.json
index 6a0b17e6a1..5cccc1401f 100644
--- a/apps/v4/public/r/styles/radix-lyra/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/menubar.json b/apps/v4/public/r/styles/radix-lyra/menubar.json
index b7b7f354f1..5d20142d03 100644
--- a/apps/v4/public/r/styles/radix-lyra/menubar.json
+++ b/apps/v4/public/r/styles/radix-lyra/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/native-select.json b/apps/v4/public/r/styles/radix-lyra/native-select.json
index c4f73a9b07..f4c7e8dcbf 100644
--- a/apps/v4/public/r/styles/radix-lyra/native-select.json
+++ b/apps/v4/public/r/styles/radix-lyra/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
index ee5609d7c2..a693baf2af 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
index 87a3a0dd8c..e34007a97f 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/pagination.json b/apps/v4/public/r/styles/radix-lyra/pagination.json
index dfb9b5d32e..feceb9f16c 100644
--- a/apps/v4/public/r/styles/radix-lyra/pagination.json
+++ b/apps/v4/public/r/styles/radix-lyra/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/preview.json b/apps/v4/public/r/styles/radix-lyra/preview.json
index 157058ad1b..0e808a2712 100644
--- a/apps/v4/public/r/styles/radix-lyra/preview.json
+++ b/apps/v4/public/r/styles/radix-lyra/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/progress-example.json b/apps/v4/public/r/styles/radix-lyra/progress-example.json
index 94d5d5d66c..5fdc9f37d8 100644
--- a/apps/v4/public/r/styles/radix-lyra/progress-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/radio-group.json b/apps/v4/public/r/styles/radix-lyra/radio-group.json
index 67d7405e56..ab323e1d88 100644
--- a/apps/v4/public/r/styles/radix-lyra/radio-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full focus-visible:ring-1 aria-invalid:ring-1 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/select-example.json b/apps/v4/public/r/styles/radix-lyra/select-example.json
index 1041fbcbbc..0e5ed792c8 100644
--- a/apps/v4/public/r/styles/radix-lyra/select-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/select.json b/apps/v4/public/r/styles/radix-lyra/select.json
index 90e8d2d186..bf9fb41ea7 100644
--- a/apps/v4/public/r/styles/radix-lyra/select.json
+++ b/apps/v4/public/r/styles/radix-lyra/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sheet.json b/apps/v4/public/r/styles/radix-lyra/sheet.json
index ca35e9cc9c..e6649bb66d 100644
--- a/apps/v4/public/r/styles/radix-lyra/sheet.json
+++ b/apps/v4/public/r/styles/radix-lyra/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
index 967d07b054..382f39f86e 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
index a77ad23201..9e7f0d71c8 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
index ba9180aa86..fb5bc22190 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
index e1343399cd..b697b30f1b 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar.json b/apps/v4/public/r/styles/radix-lyra/sidebar.json
index 39d83e98a3..b999969ce3 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-none px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-none px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sonner.json b/apps/v4/public/r/styles/radix-lyra/sonner.json
index 9b43f87b1a..1e9dc4394d 100644
--- a/apps/v4/public/r/styles/radix-lyra/sonner.json
+++ b/apps/v4/public/r/styles/radix-lyra/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/spinner-example.json b/apps/v4/public/r/styles/radix-lyra/spinner-example.json
index 0b6beee399..076f87264a 100644
--- a/apps/v4/public/r/styles/radix-lyra/spinner-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/spinner.json b/apps/v4/public/r/styles/radix-lyra/spinner.json
index de8471e286..7019bdc69e 100644
--- a/apps/v4/public/r/styles/radix-lyra/spinner.json
+++ b/apps/v4/public/r/styles/radix-lyra/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/table-example.json b/apps/v4/public/r/styles/radix-lyra/table-example.json
index 57b86ea854..3723589398 100644
--- a/apps/v4/public/r/styles/radix-lyra/table-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/table-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tabs-example.json b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
index 100abd234a..9e42e15278 100644
--- a/apps/v4/public/r/styles/radix-lyra/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/toggle-example.json b/apps/v4/public/r/styles/radix-lyra/toggle-example.json
index b92a02103e..7562d2ddfc 100644
--- a/apps/v4/public/r/styles/radix-lyra/toggle-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 7990550cba..9306a5d0fd 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/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
index 0d596b9cf2..3291d52396 100644
--- a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/vercel.json b/apps/v4/public/r/styles/radix-lyra/vercel.json
index 4d8f3bf9f5..722794dcbd 100644
--- a/apps/v4/public/r/styles/radix-lyra/vercel.json
+++ b/apps/v4/public/r/styles/radix-lyra/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/accordion-example.json b/apps/v4/public/r/styles/radix-maia/accordion-example.json
index 42f56998a0..81b445b9a9 100644
--- a/apps/v4/public/r/styles/radix-maia/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-maia/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/accordion.json b/apps/v4/public/r/styles/radix-maia/accordion.json
index 356f6659f9..d157f23fd2 100644
--- a/apps/v4/public/r/styles/radix-maia/accordion.json
+++ b/apps/v4/public/r/styles/radix-maia/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-2xl border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-4 text-left text-sm font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-4 text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/alert-dialog-example.json b/apps/v4/public/r/styles/radix-maia/alert-dialog-example.json
index 9d6e4c57a8..1050cff3e1 100644
--- a/apps/v4/public/r/styles/radix-maia/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/radix-maia/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/alert-example.json b/apps/v4/public/r/styles/radix-maia/alert-example.json
index 08efa00e03..b12932e3c6 100644
--- a/apps/v4/public/r/styles/radix-maia/alert-example.json
+++ b/apps/v4/public/r/styles/radix-maia/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/avatar-example.json b/apps/v4/public/r/styles/radix-maia/avatar-example.json
index 9c7d51d1f7..65488ff1c2 100644
--- a/apps/v4/public/r/styles/radix-maia/avatar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/badge-example.json b/apps/v4/public/r/styles/radix-maia/badge-example.json
index 0495e6308a..11bfb4f2fa 100644
--- a/apps/v4/public/r/styles/radix-maia/badge-example.json
+++ b/apps/v4/public/r/styles/radix-maia/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/breadcrumb.json b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
index b78102cf7f..4bc1bcd4c2 100644
--- a/apps/v4/public/r/styles/radix-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/button-example.json b/apps/v4/public/r/styles/radix-maia/button-example.json
index df4917bcbd..19bc53cf5b 100644
--- a/apps/v4/public/r/styles/radix-maia/button-example.json
+++ b/apps/v4/public/r/styles/radix-maia/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/button-group-example.json b/apps/v4/public/r/styles/radix-maia/button-group-example.json
index 4c7ac6a994..5049fcfe43 100644
--- a/apps/v4/public/r/styles/radix-maia/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-maia/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/calendar-example.json b/apps/v4/public/r/styles/radix-maia/calendar-example.json
index 2c6d38597e..dd1e1e47d5 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/calendar.json b/apps/v4/public/r/styles/radix-maia/calendar.json
index 21a474db61..56170f3e08 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/card-example.json b/apps/v4/public/r/styles/radix-maia/card-example.json
index 4757f35bac..87726c2b4f 100644
--- a/apps/v4/public/r/styles/radix-maia/card-example.json
+++ b/apps/v4/public/r/styles/radix-maia/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/carousel.json b/apps/v4/public/r/styles/radix-maia/carousel.json
index 031f914572..f20dc01211 100644
--- a/apps/v4/public/r/styles/radix-maia/carousel.json
+++ b/apps/v4/public/r/styles/radix-maia/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/chart-example.json b/apps/v4/public/r/styles/radix-maia/chart-example.json
index eaab356b8d..0578dad209 100644
--- a/apps/v4/public/r/styles/radix-maia/chart-example.json
+++ b/apps/v4/public/r/styles/radix-maia/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/chatgpt.json b/apps/v4/public/r/styles/radix-maia/chatgpt.json
index 04331fa539..3a9154541b 100644
--- a/apps/v4/public/r/styles/radix-maia/chatgpt.json
+++ b/apps/v4/public/r/styles/radix-maia/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/checkbox.json b/apps/v4/public/r/styles/radix-maia/checkbox.json
index 5cf6ff50ea..03c8c86c7c 100644
--- a/apps/v4/public/r/styles/radix-maia/checkbox.json
+++ b/apps/v4/public/r/styles/radix-maia/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/collapsible-example.json b/apps/v4/public/r/styles/radix-maia/collapsible-example.json
index d3988db9b2..d4a90b4710 100644
--- a/apps/v4/public/r/styles/radix-maia/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-maia/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/combobox-example.json b/apps/v4/public/r/styles/radix-maia/combobox-example.json
index 41c8774d16..49612583ee 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/combobox.json b/apps/v4/public/r/styles/radix-maia/combobox.json
index 676066b4ad..ea00d45bf3 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/command-example.json b/apps/v4/public/r/styles/radix-maia/command-example.json
index fcedeff2b8..a7e56a0d51 100644
--- a/apps/v4/public/r/styles/radix-maia/command-example.json
+++ b/apps/v4/public/r/styles/radix-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/command.json b/apps/v4/public/r/styles/radix-maia/command.json
index 19a26457d4..016241b9bd 100644
--- a/apps/v4/public/r/styles/radix-maia/command.json
+++ b/apps/v4/public/r/styles/radix-maia/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-4xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-4xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/component-example.json b/apps/v4/public/r/styles/radix-maia/component-example.json
index 04838f6d42..57b8822921 100644
--- a/apps/v4/public/r/styles/radix-maia/component-example.json
+++ b/apps/v4/public/r/styles/radix-maia/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu-example.json b/apps/v4/public/r/styles/radix-maia/context-menu-example.json
index fe1c6a9d0a..aefb6c5833 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu.json b/apps/v4/public/r/styles/radix-maia/context-menu.json
index b7e7fbee3c..d360867b59 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dialog-example.json b/apps/v4/public/r/styles/radix-maia/dialog-example.json
index 767313cfc9..d45c29ab31 100644
--- a/apps/v4/public/r/styles/radix-maia/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dialog.json b/apps/v4/public/r/styles/radix-maia/dialog.json
index f7487ad026..7719060e45 100644
--- a/apps/v4/public/r/styles/radix-maia/dialog.json
+++ b/apps/v4/public/r/styles/radix-maia/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 grid max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
index 3ca2f60d9e..92121f553f 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
index 8089fc554c..70a744c694 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/empty-example.json b/apps/v4/public/r/styles/radix-maia/empty-example.json
index c77a8b8a00..bbb3e6e6ca 100644
--- a/apps/v4/public/r/styles/radix-maia/empty-example.json
+++ b/apps/v4/public/r/styles/radix-maia/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/github.json b/apps/v4/public/r/styles/radix-maia/github.json
index 3cb24173f6..de4b1c7bf5 100644
--- a/apps/v4/public/r/styles/radix-maia/github.json
+++ b/apps/v4/public/r/styles/radix-maia/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-group-example.json b/apps/v4/public/r/styles/radix-maia/input-group-example.json
index e3ef74da80..8a2614862d 100644
--- a/apps/v4/public/r/styles/radix-maia/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-otp-example.json b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
index bf0cfcbe43..ae0a5f6981 100644
--- a/apps/v4/public/r/styles/radix-maia/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-otp.json b/apps/v4/public/r/styles/radix-maia/input-otp.json
index 7a1ffc3ec6..5063688ec4 100644
--- a/apps/v4/public/r/styles/radix-maia/input-otp.json
+++ b/apps/v4/public/r/styles/radix-maia/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/item-example.json b/apps/v4/public/r/styles/radix-maia/item-example.json
index b82a0e7e74..11eaa9c199 100644
--- a/apps/v4/public/r/styles/radix-maia/item-example.json
+++ b/apps/v4/public/r/styles/radix-maia/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/kbd-example.json b/apps/v4/public/r/styles/radix-maia/kbd-example.json
index 416277d83b..086e2ad1b5 100644
--- a/apps/v4/public/r/styles/radix-maia/kbd-example.json
+++ b/apps/v4/public/r/styles/radix-maia/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/menubar-example.json b/apps/v4/public/r/styles/radix-maia/menubar-example.json
index 13e568f3bf..fdf29e2eb4 100644
--- a/apps/v4/public/r/styles/radix-maia/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/menubar.json b/apps/v4/public/r/styles/radix-maia/menubar.json
index 5f5dff1266..023358bf72 100644
--- a/apps/v4/public/r/styles/radix-maia/menubar.json
+++ b/apps/v4/public/r/styles/radix-maia/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/native-select.json b/apps/v4/public/r/styles/radix-maia/native-select.json
index 7ea56f51bc..e08a07367e 100644
--- a/apps/v4/public/r/styles/radix-maia/native-select.json
+++ b/apps/v4/public/r/styles/radix-maia/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-3.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-3.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
index e36cbc32e9..659535edcf 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu.json b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
index 8451a0e17c..ff4a2ac038 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/5 rounded-2xl shadow-2xl ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/5 rounded-2xl shadow-2xl ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/pagination.json b/apps/v4/public/r/styles/radix-maia/pagination.json
index f25a9d1faa..f2f8fc7cc3 100644
--- a/apps/v4/public/r/styles/radix-maia/pagination.json
+++ b/apps/v4/public/r/styles/radix-maia/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/preview.json b/apps/v4/public/r/styles/radix-maia/preview.json
index 1bedd6fdd8..5157c95b3b 100644
--- a/apps/v4/public/r/styles/radix-maia/preview.json
+++ b/apps/v4/public/r/styles/radix-maia/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/progress-example.json b/apps/v4/public/r/styles/radix-maia/progress-example.json
index b5f19fa9ec..d4176590fb 100644
--- a/apps/v4/public/r/styles/radix-maia/progress-example.json
+++ b/apps/v4/public/r/styles/radix-maia/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/radio-group.json b/apps/v4/public/r/styles/radix-maia/radio-group.json
index 058614bc56..f88668f335 100644
--- a/apps/v4/public/r/styles/radix-maia/radio-group.json
+++ b/apps/v4/public/r/styles/radix-maia/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/select-example.json b/apps/v4/public/r/styles/radix-maia/select-example.json
index 4bb6fdc9bd..929899ade2 100644
--- a/apps/v4/public/r/styles/radix-maia/select-example.json
+++ b/apps/v4/public/r/styles/radix-maia/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/select.json b/apps/v4/public/r/styles/radix-maia/select.json
index 7b8bbf167f..bcdf4d38c5 100644
--- a/apps/v4/public/r/styles/radix-maia/select.json
+++ b/apps/v4/public/r/styles/radix-maia/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sheet.json b/apps/v4/public/r/styles/radix-maia/sheet.json
index 44dfe059f3..c7370a7b4c 100644
--- a/apps/v4/public/r/styles/radix-maia/sheet.json
+++ b/apps/v4/public/r/styles/radix-maia/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-example.json
index b38f3a1793..f6856f688a 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
index 4d78384c5b..22d2634b92 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
index 939106fa27..a265af0303 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
index d009ac8f5f..6e9f779d87 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar.json b/apps/v4/public/r/styles/radix-maia/sidebar.json
index 0f9d6a8588..c9bcd9805c 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sonner.json b/apps/v4/public/r/styles/radix-maia/sonner.json
index b2dff530d2..d452375a1f 100644
--- a/apps/v4/public/r/styles/radix-maia/sonner.json
+++ b/apps/v4/public/r/styles/radix-maia/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/spinner-example.json b/apps/v4/public/r/styles/radix-maia/spinner-example.json
index a638fa5668..6c5e06349f 100644
--- a/apps/v4/public/r/styles/radix-maia/spinner-example.json
+++ b/apps/v4/public/r/styles/radix-maia/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/spinner.json b/apps/v4/public/r/styles/radix-maia/spinner.json
index 72a1318b69..c3a2754df2 100644
--- a/apps/v4/public/r/styles/radix-maia/spinner.json
+++ b/apps/v4/public/r/styles/radix-maia/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/table-example.json b/apps/v4/public/r/styles/radix-maia/table-example.json
index 0b2cab47b8..a2f9aedefb 100644
--- a/apps/v4/public/r/styles/radix-maia/table-example.json
+++ b/apps/v4/public/r/styles/radix-maia/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/table-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tabs-example.json b/apps/v4/public/r/styles/radix-maia/tabs-example.json
index a73a5995cf..f736bcd882 100644
--- a/apps/v4/public/r/styles/radix-maia/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/toggle-example.json b/apps/v4/public/r/styles/radix-maia/toggle-example.json
index 5752a2bef5..e0297b8c04 100644
--- a/apps/v4/public/r/styles/radix-maia/toggle-example.json
+++ b/apps/v4/public/r/styles/radix-maia/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 c05f7353c2..2bcc1cf738 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/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tooltip-example.json b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
index 88dbbcafeb..a1b64870c5 100644
--- a/apps/v4/public/r/styles/radix-maia/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/vercel.json b/apps/v4/public/r/styles/radix-maia/vercel.json
index 8ce8a79681..4d72c7458d 100644
--- a/apps/v4/public/r/styles/radix-maia/vercel.json
+++ b/apps/v4/public/r/styles/radix-maia/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/accordion-example.json b/apps/v4/public/r/styles/radix-mira/accordion-example.json
index 9592556bae..5d09cdc599 100644
--- a/apps/v4/public/r/styles/radix-mira/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-mira/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/accordion.json b/apps/v4/public/r/styles/radix-mira/accordion.json
index 48a7e38f56..1cd4dbda5c 100644
--- a/apps/v4/public/r/styles/radix-mira/accordion.json
+++ b/apps/v4/public/r/styles/radix-mira/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-md border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"overflow-hidden rounded-md border flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"data-open:bg-muted/50 not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/alert-dialog-example.json b/apps/v4/public/r/styles/radix-mira/alert-dialog-example.json
index de97eec2c9..9d3e29b399 100644
--- a/apps/v4/public/r/styles/radix-mira/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/radix-mira/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/alert-example.json b/apps/v4/public/r/styles/radix-mira/alert-example.json
index a7504fb300..926b9f9ea6 100644
--- a/apps/v4/public/r/styles/radix-mira/alert-example.json
+++ b/apps/v4/public/r/styles/radix-mira/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/avatar-example.json b/apps/v4/public/r/styles/radix-mira/avatar-example.json
index 271fa05372..a57897a11a 100644
--- a/apps/v4/public/r/styles/radix-mira/avatar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/badge-example.json b/apps/v4/public/r/styles/radix-mira/badge-example.json
index bc93b1f410..4f464d2e02 100644
--- a/apps/v4/public/r/styles/radix-mira/badge-example.json
+++ b/apps/v4/public/r/styles/radix-mira/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/breadcrumb.json b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
index 224ebbea65..9c4c37cbc5 100644
--- a/apps/v4/public/r/styles/radix-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/button-example.json b/apps/v4/public/r/styles/radix-mira/button-example.json
index 7e9958c1a0..a52a2c1bbc 100644
--- a/apps/v4/public/r/styles/radix-mira/button-example.json
+++ b/apps/v4/public/r/styles/radix-mira/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/button-group-example.json b/apps/v4/public/r/styles/radix-mira/button-group-example.json
index f611c03600..ee2af3913f 100644
--- a/apps/v4/public/r/styles/radix-mira/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-mira/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar-example.json b/apps/v4/public/r/styles/radix-mira/calendar-example.json
index 688bfca9d5..037f3bf932 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar.json b/apps/v4/public/r/styles/radix-mira/calendar.json
index 1d4b82c9dc..7eee4c34ae 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/card-example.json b/apps/v4/public/r/styles/radix-mira/card-example.json
index 73f5ded788..04e6417283 100644
--- a/apps/v4/public/r/styles/radix-mira/card-example.json
+++ b/apps/v4/public/r/styles/radix-mira/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/carousel.json b/apps/v4/public/r/styles/radix-mira/carousel.json
index fda912d1ca..a89fbdd2fc 100644
--- a/apps/v4/public/r/styles/radix-mira/carousel.json
+++ b/apps/v4/public/r/styles/radix-mira/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/chart-example.json b/apps/v4/public/r/styles/radix-mira/chart-example.json
index 4878209846..6a43855105 100644
--- a/apps/v4/public/r/styles/radix-mira/chart-example.json
+++ b/apps/v4/public/r/styles/radix-mira/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/chatgpt.json b/apps/v4/public/r/styles/radix-mira/chatgpt.json
index fceef2321b..da66d9309a 100644
--- a/apps/v4/public/r/styles/radix-mira/chatgpt.json
+++ b/apps/v4/public/r/styles/radix-mira/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/checkbox.json b/apps/v4/public/r/styles/radix-mira/checkbox.json
index e7c1332d8f..5c19341350 100644
--- a/apps/v4/public/r/styles/radix-mira/checkbox.json
+++ b/apps/v4/public/r/styles/radix-mira/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/collapsible-example.json b/apps/v4/public/r/styles/radix-mira/collapsible-example.json
index 2479de78de..b3e1788343 100644
--- a/apps/v4/public/r/styles/radix-mira/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-mira/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/combobox-example.json b/apps/v4/public/r/styles/radix-mira/combobox-example.json
index 4096c9bae6..79032fa3b8 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/combobox.json b/apps/v4/public/r/styles/radix-mira/combobox.json
index db72f7fe89..5af7131e1c 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-3.5 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-3.5 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/command-example.json b/apps/v4/public/r/styles/radix-mira/command-example.json
index 0915844b8d..6e491293f7 100644
--- a/apps/v4/public/r/styles/radix-mira/command-example.json
+++ b/apps/v4/public/r/styles/radix-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/command.json b/apps/v4/public/r/styles/radix-mira/command.json
index eccc134476..29320ef2a7 100644
--- a/apps/v4/public/r/styles/radix-mira/command.json
+++ b/apps/v4/public/r/styles/radix-mira/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! p-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/component-example.json b/apps/v4/public/r/styles/radix-mira/component-example.json
index 19b5d91450..f856d6c871 100644
--- a/apps/v4/public/r/styles/radix-mira/component-example.json
+++ b/apps/v4/public/r/styles/radix-mira/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/context-menu-example.json b/apps/v4/public/r/styles/radix-mira/context-menu-example.json
index d735e17e1e..f887f9c131 100644
--- a/apps/v4/public/r/styles/radix-mira/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/context-menu.json b/apps/v4/public/r/styles/radix-mira/context-menu.json
index 54200f31a0..bd4b3e4ab8 100644
--- a/apps/v4/public/r/styles/radix-mira/context-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dialog-example.json b/apps/v4/public/r/styles/radix-mira/dialog-example.json
index ced4efdf68..21e13d9241 100644
--- a/apps/v4/public/r/styles/radix-mira/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dialog.json b/apps/v4/public/r/styles/radix-mira/dialog.json
index ddba7a12b0..a3ff61e667 100644
--- a/apps/v4/public/r/styles/radix-mira/dialog.json
+++ b/apps/v4/public/r/styles/radix-mira/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-1 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
index 8798473b3d..1358803220 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
index 3e88c1bbc7..a845103e0e 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/empty-example.json b/apps/v4/public/r/styles/radix-mira/empty-example.json
index 751059f48e..d794525b3b 100644
--- a/apps/v4/public/r/styles/radix-mira/empty-example.json
+++ b/apps/v4/public/r/styles/radix-mira/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/github.json b/apps/v4/public/r/styles/radix-mira/github.json
index 6a5b41e625..a125bb4989 100644
--- a/apps/v4/public/r/styles/radix-mira/github.json
+++ b/apps/v4/public/r/styles/radix-mira/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-group-example.json b/apps/v4/public/r/styles/radix-mira/input-group-example.json
index e2d16a5d72..5704f6e1bd 100644
--- a/apps/v4/public/r/styles/radix-mira/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp-example.json b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
index 93ffcdfbfc..9ceb386236 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp.json b/apps/v4/public/r/styles/radix-mira/input-otp.json
index f92f120d1c..08c4b09728 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/item-example.json b/apps/v4/public/r/styles/radix-mira/item-example.json
index 7b5610b09f..cb6c64676b 100644
--- a/apps/v4/public/r/styles/radix-mira/item-example.json
+++ b/apps/v4/public/r/styles/radix-mira/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/kbd-example.json b/apps/v4/public/r/styles/radix-mira/kbd-example.json
index edda18a283..6a4fe2f573 100644
--- a/apps/v4/public/r/styles/radix-mira/kbd-example.json
+++ b/apps/v4/public/r/styles/radix-mira/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/menubar-example.json b/apps/v4/public/r/styles/radix-mira/menubar-example.json
index 7f6caaafae..04f6f5e2a1 100644
--- a/apps/v4/public/r/styles/radix-mira/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/menubar.json b/apps/v4/public/r/styles/radix-mira/menubar.json
index e38c8bd519..0346a17d12 100644
--- a/apps/v4/public/r/styles/radix-mira/menubar.json
+++ b/apps/v4/public/r/styles/radix-mira/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-md border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 rounded-md border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/native-select.json b/apps/v4/public/r/styles/radix-mira/native-select.json
index c2e5a97c18..1fc2becb17 100644
--- a/apps/v4/public/r/styles/radix-mira/native-select.json
+++ b/apps/v4/public/r/styles/radix-mira/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
index 8742c612b3..fbded48ac3 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu.json b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
index d6130a3514..9e104d7849 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/pagination.json b/apps/v4/public/r/styles/radix-mira/pagination.json
index 31a9ccc8f7..913063dd2d 100644
--- a/apps/v4/public/r/styles/radix-mira/pagination.json
+++ b/apps/v4/public/r/styles/radix-mira/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-7 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/preview.json b/apps/v4/public/r/styles/radix-mira/preview.json
index adaeda2414..7d920ce427 100644
--- a/apps/v4/public/r/styles/radix-mira/preview.json
+++ b/apps/v4/public/r/styles/radix-mira/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/progress-example.json b/apps/v4/public/r/styles/radix-mira/progress-example.json
index 3c948fbe29..bc1e2cbb70 100644
--- a/apps/v4/public/r/styles/radix-mira/progress-example.json
+++ b/apps/v4/public/r/styles/radix-mira/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/radio-group.json b/apps/v4/public/r/styles/radix-mira/radio-group.json
index b9bf9908cf..6649b69e90 100644
--- a/apps/v4/public/r/styles/radix-mira/radio-group.json
+++ b/apps/v4/public/r/styles/radix-mira/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/select-example.json b/apps/v4/public/r/styles/radix-mira/select-example.json
index 6a94704174..1dbb9dd66e 100644
--- a/apps/v4/public/r/styles/radix-mira/select-example.json
+++ b/apps/v4/public/r/styles/radix-mira/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/select.json b/apps/v4/public/r/styles/radix-mira/select.json
index 967b3f831f..34e88ef9c2 100644
--- a/apps/v4/public/r/styles/radix-mira/select.json
+++ b/apps/v4/public/r/styles/radix-mira/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          className=\"text-muted-foreground size-3.5 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"text-muted-foreground size-3.5 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sheet.json b/apps/v4/public/r/styles/radix-mira/sheet.json
index 57b74c367b..36a49f5271 100644
--- a/apps/v4/public/r/styles/radix-mira/sheet.json
+++ b/apps/v4/public/r/styles/radix-mira/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-6 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-6 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-example.json
index b9af168878..992a6f849c 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
index a33afd0b05..95635986cc 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
index 8600c90b8d..5923d4fa8b 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
index 13b045fb7d..0c509bebe8 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar.json b/apps/v4/public/r/styles/radix-mira/sidebar.json
index a3ea70ecb8..2e1b2beee5 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"px-2 py-1 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-xs w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-px flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sonner.json b/apps/v4/public/r/styles/radix-mira/sonner.json
index 7e3f190aaa..890a4d62c0 100644
--- a/apps/v4/public/r/styles/radix-mira/sonner.json
+++ b/apps/v4/public/r/styles/radix-mira/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/spinner-example.json b/apps/v4/public/r/styles/radix-mira/spinner-example.json
index 76d83efd1f..b63d4f5402 100644
--- a/apps/v4/public/r/styles/radix-mira/spinner-example.json
+++ b/apps/v4/public/r/styles/radix-mira/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/spinner.json b/apps/v4/public/r/styles/radix-mira/spinner.json
index 408ec318dd..011f7aa0a6 100644
--- a/apps/v4/public/r/styles/radix-mira/spinner.json
+++ b/apps/v4/public/r/styles/radix-mira/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/table-example.json b/apps/v4/public/r/styles/radix-mira/table-example.json
index 3249a7f41d..4e873c0054 100644
--- a/apps/v4/public/r/styles/radix-mira/table-example.json
+++ b/apps/v4/public/r/styles/radix-mira/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/table-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tabs-example.json b/apps/v4/public/r/styles/radix-mira/tabs-example.json
index 40db07744f..5cd2a98d43 100644
--- a/apps/v4/public/r/styles/radix-mira/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/toggle-example.json b/apps/v4/public/r/styles/radix-mira/toggle-example.json
index fa627654ef..3a9a475ceb 100644
--- a/apps/v4/public/r/styles/radix-mira/toggle-example.json
+++ b/apps/v4/public/r/styles/radix-mira/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 ff4f476f31..d014802085 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/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tooltip-example.json b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
index 950aba31ca..006a5a0edc 100644
--- a/apps/v4/public/r/styles/radix-mira/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/vercel.json b/apps/v4/public/r/styles/radix-mira/vercel.json
index 1b87427bd4..70732833ea 100644
--- a/apps/v4/public/r/styles/radix-mira/vercel.json
+++ b/apps/v4/public/r/styles/radix-mira/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/accordion-example.json b/apps/v4/public/r/styles/radix-nova/accordion-example.json
index b7cdf8f8f6..70cdd661bc 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/accordion.json b/apps/v4/public/r/styles/radix-nova/accordion.json
index ca9cd7a9be..06cad13466 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/alert-dialog-example.json b/apps/v4/public/r/styles/radix-nova/alert-dialog-example.json
index 943de6b137..97d40275f5 100644
--- a/apps/v4/public/r/styles/radix-nova/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/radix-nova/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/alert-example.json b/apps/v4/public/r/styles/radix-nova/alert-example.json
index 309d9b24f5..1eb269e978 100644
--- a/apps/v4/public/r/styles/radix-nova/alert-example.json
+++ b/apps/v4/public/r/styles/radix-nova/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/avatar-example.json b/apps/v4/public/r/styles/radix-nova/avatar-example.json
index a8efbc36d4..464401decc 100644
--- a/apps/v4/public/r/styles/radix-nova/avatar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/badge-example.json b/apps/v4/public/r/styles/radix-nova/badge-example.json
index 7302d3e264..356aea20f3 100644
--- a/apps/v4/public/r/styles/radix-nova/badge-example.json
+++ b/apps/v4/public/r/styles/radix-nova/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/breadcrumb.json b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
index c06323178b..9eb27cbd35 100644
--- a/apps/v4/public/r/styles/radix-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/button-example.json b/apps/v4/public/r/styles/radix-nova/button-example.json
index 0d9f29fcaa..9144b4b0a7 100644
--- a/apps/v4/public/r/styles/radix-nova/button-example.json
+++ b/apps/v4/public/r/styles/radix-nova/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/button-group-example.json b/apps/v4/public/r/styles/radix-nova/button-group-example.json
index 13df0587d6..1ec1f39f4a 100644
--- a/apps/v4/public/r/styles/radix-nova/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-nova/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar-example.json b/apps/v4/public/r/styles/radix-nova/calendar-example.json
index f25dd7cabf..bd34a486d5 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar.json b/apps/v4/public/r/styles/radix-nova/calendar.json
index 274c6fa0a1..0ab7554034 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/card-example.json b/apps/v4/public/r/styles/radix-nova/card-example.json
index 28b774e840..cd7e6ec5ce 100644
--- a/apps/v4/public/r/styles/radix-nova/card-example.json
+++ b/apps/v4/public/r/styles/radix-nova/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/carousel.json b/apps/v4/public/r/styles/radix-nova/carousel.json
index 4085c73619..025670c13d 100644
--- a/apps/v4/public/r/styles/radix-nova/carousel.json
+++ b/apps/v4/public/r/styles/radix-nova/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/chart-example.json b/apps/v4/public/r/styles/radix-nova/chart-example.json
index 664d320fb5..8f5a80959b 100644
--- a/apps/v4/public/r/styles/radix-nova/chart-example.json
+++ b/apps/v4/public/r/styles/radix-nova/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/chatgpt.json b/apps/v4/public/r/styles/radix-nova/chatgpt.json
index 771a97d3b5..de822fb2f8 100644
--- a/apps/v4/public/r/styles/radix-nova/chatgpt.json
+++ b/apps/v4/public/r/styles/radix-nova/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/checkbox.json b/apps/v4/public/r/styles/radix-nova/checkbox.json
index 160aa440fa..43f3bfaf49 100644
--- a/apps/v4/public/r/styles/radix-nova/checkbox.json
+++ b/apps/v4/public/r/styles/radix-nova/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/collapsible-example.json b/apps/v4/public/r/styles/radix-nova/collapsible-example.json
index 515ac89432..e2d63cb905 100644
--- a/apps/v4/public/r/styles/radix-nova/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-nova/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/combobox-example.json b/apps/v4/public/r/styles/radix-nova/combobox-example.json
index 715795b34f..6ed26b298d 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/combobox.json b/apps/v4/public/r/styles/radix-nova/combobox.json
index c842675d5c..e3cd4528fd 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/command-example.json b/apps/v4/public/r/styles/radix-nova/command-example.json
index 7315c38393..fface5ce6c 100644
--- a/apps/v4/public/r/styles/radix-nova/command-example.json
+++ b/apps/v4/public/r/styles/radix-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/command.json b/apps/v4/public/r/styles/radix-nova/command.json
index 962d12d517..de09e2e95e 100644
--- a/apps/v4/public/r/styles/radix-nova/command.json
+++ b/apps/v4/public/r/styles/radix-nova/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/component-example.json b/apps/v4/public/r/styles/radix-nova/component-example.json
index b4b77fcf24..0d7a9be95e 100644
--- a/apps/v4/public/r/styles/radix-nova/component-example.json
+++ b/apps/v4/public/r/styles/radix-nova/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/context-menu-example.json b/apps/v4/public/r/styles/radix-nova/context-menu-example.json
index e1c52d405f..b899e48c9b 100644
--- a/apps/v4/public/r/styles/radix-nova/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/context-menu.json b/apps/v4/public/r/styles/radix-nova/context-menu.json
index be473133ee..faede960f1 100644
--- a/apps/v4/public/r/styles/radix-nova/context-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dialog-example.json b/apps/v4/public/r/styles/radix-nova/dialog-example.json
index ff8d636e24..392c09a395 100644
--- a/apps/v4/public/r/styles/radix-nova/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dialog.json b/apps/v4/public/r/styles/radix-nova/dialog.json
index c29d9eef81..9f7568f3a9 100644
--- a/apps/v4/public/r/styles/radix-nova/dialog.json
+++ b/apps/v4/public/r/styles/radix-nova/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
index 0651232bcb..8eec58edf9 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
index 1882a64d5b..0d1ca4a7e1 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/empty-example.json b/apps/v4/public/r/styles/radix-nova/empty-example.json
index 0249939143..301f58bba5 100644
--- a/apps/v4/public/r/styles/radix-nova/empty-example.json
+++ b/apps/v4/public/r/styles/radix-nova/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/github.json b/apps/v4/public/r/styles/radix-nova/github.json
index 4f5e07fec7..9bc08993e1 100644
--- a/apps/v4/public/r/styles/radix-nova/github.json
+++ b/apps/v4/public/r/styles/radix-nova/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-group-example.json b/apps/v4/public/r/styles/radix-nova/input-group-example.json
index f39db6393b..84b49bd7d8 100644
--- a/apps/v4/public/r/styles/radix-nova/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp-example.json b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
index 92109798b7..8b684f7b7d 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp.json b/apps/v4/public/r/styles/radix-nova/input-otp.json
index 45422baeb0..40c13f48a7 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/item-example.json b/apps/v4/public/r/styles/radix-nova/item-example.json
index 3e3f8a5d58..bd3fc35d10 100644
--- a/apps/v4/public/r/styles/radix-nova/item-example.json
+++ b/apps/v4/public/r/styles/radix-nova/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/kbd-example.json b/apps/v4/public/r/styles/radix-nova/kbd-example.json
index fb64886eb3..e2a0f5941a 100644
--- a/apps/v4/public/r/styles/radix-nova/kbd-example.json
+++ b/apps/v4/public/r/styles/radix-nova/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/menubar-example.json b/apps/v4/public/r/styles/radix-nova/menubar-example.json
index fea0185515..b0d2de5bb3 100644
--- a/apps/v4/public/r/styles/radix-nova/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/menubar.json b/apps/v4/public/r/styles/radix-nova/menubar.json
index 79f3876c7d..3bc3235e8f 100644
--- a/apps/v4/public/r/styles/radix-nova/menubar.json
+++ b/apps/v4/public/r/styles/radix-nova/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-8 gap-0.5 rounded-lg border p-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/native-select.json b/apps/v4/public/r/styles/radix-nova/native-select.json
index b10dddaf0e..60946a8fdd 100644
--- a/apps/v4/public/r/styles/radix-nova/native-select.json
+++ b/apps/v4/public/r/styles/radix-nova/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
index ca0747a27f..f1c6d73842 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu.json b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
index 8371b5a538..34171ec93d 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/pagination.json b/apps/v4/public/r/styles/radix-nova/pagination.json
index 582b0854f9..a5fabb7339 100644
--- a/apps/v4/public/r/styles/radix-nova/pagination.json
+++ b/apps/v4/public/r/styles/radix-nova/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-0.5 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-1.5!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-1.5!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/preview.json b/apps/v4/public/r/styles/radix-nova/preview.json
index 638a4dbe05..9f4d974ebc 100644
--- a/apps/v4/public/r/styles/radix-nova/preview.json
+++ b/apps/v4/public/r/styles/radix-nova/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/progress-example.json b/apps/v4/public/r/styles/radix-nova/progress-example.json
index 625cc6860c..ce30c62e8e 100644
--- a/apps/v4/public/r/styles/radix-nova/progress-example.json
+++ b/apps/v4/public/r/styles/radix-nova/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/radio-group.json b/apps/v4/public/r/styles/radix-nova/radio-group.json
index f50656539f..da7326e23f 100644
--- a/apps/v4/public/r/styles/radix-nova/radio-group.json
+++ b/apps/v4/public/r/styles/radix-nova/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/select-example.json b/apps/v4/public/r/styles/radix-nova/select-example.json
index 5c47bac810..ced8360a33 100644
--- a/apps/v4/public/r/styles/radix-nova/select-example.json
+++ b/apps/v4/public/r/styles/radix-nova/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/select.json b/apps/v4/public/r/styles/radix-nova/select.json
index ca0168a5ac..590d9b87bc 100644
--- a/apps/v4/public/r/styles/radix-nova/select.json
+++ b/apps/v4/public/r/styles/radix-nova/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sheet.json b/apps/v4/public/r/styles/radix-nova/sheet.json
index 27eecdf978..42148fe51c 100644
--- a/apps/v4/public/r/styles/radix-nova/sheet.json
+++ b/apps/v4/public/r/styles/radix-nova/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-0.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-example.json
index 43a3821320..4213dfbe4d 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
index 3e7d39a5b8..b5e49aae3d 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
index fc069a90b3..6b5a267a8f 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
index cb79dd1696..fa87e7c42a 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar.json b/apps/v4/public/r/styles/radix-nova/sidebar.json
index de6d228797..081dca803a 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-0 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-0 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sonner.json b/apps/v4/public/r/styles/radix-nova/sonner.json
index 283c6a1bb8..72ad809579 100644
--- a/apps/v4/public/r/styles/radix-nova/sonner.json
+++ b/apps/v4/public/r/styles/radix-nova/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/spinner-example.json b/apps/v4/public/r/styles/radix-nova/spinner-example.json
index 46984968b1..e9fb2a4f2f 100644
--- a/apps/v4/public/r/styles/radix-nova/spinner-example.json
+++ b/apps/v4/public/r/styles/radix-nova/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/spinner.json b/apps/v4/public/r/styles/radix-nova/spinner.json
index b7f5f3044e..b04c7446ca 100644
--- a/apps/v4/public/r/styles/radix-nova/spinner.json
+++ b/apps/v4/public/r/styles/radix-nova/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/table-example.json b/apps/v4/public/r/styles/radix-nova/table-example.json
index 9fbaecbd15..27fe4b2b47 100644
--- a/apps/v4/public/r/styles/radix-nova/table-example.json
+++ b/apps/v4/public/r/styles/radix-nova/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/table-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tabs-example.json b/apps/v4/public/r/styles/radix-nova/tabs-example.json
index 92eecfe22f..1fbcd24fa5 100644
--- a/apps/v4/public/r/styles/radix-nova/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/toggle-example.json b/apps/v4/public/r/styles/radix-nova/toggle-example.json
index fd110c180a..f091705833 100644
--- a/apps/v4/public/r/styles/radix-nova/toggle-example.json
+++ b/apps/v4/public/r/styles/radix-nova/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 0169150594..9f0f09b850 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/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tooltip-example.json b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
index cfc2ef5011..74615bc84f 100644
--- a/apps/v4/public/r/styles/radix-nova/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/vercel.json b/apps/v4/public/r/styles/radix-nova/vercel.json
index dfa2b86098..a61ec8c77e 100644
--- a/apps/v4/public/r/styles/radix-nova/vercel.json
+++ b/apps/v4/public/r/styles/radix-nova/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/accordion-example.json b/apps/v4/public/r/styles/radix-vega/accordion-example.json
index 1e23b3f0fd..1d09591668 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/bases/radix/ui/accordion\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/accordion.json b/apps/v4/public/r/styles/radix-vega/accordion.json
index c3f2a03334..db4b1d0db0 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/alert-dialog-example.json b/apps/v4/public/r/styles/radix-vega/alert-dialog-example.json
index ca396114f8..1c057a5577 100644
--- a/apps/v4/public/r/styles/radix-vega/alert-dialog-example.json
+++ b/apps/v4/public/r/styles/radix-vega/alert-dialog-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/alert-dialog-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertDialogExample() {\n  return (\n    <ExampleWrapper>\n      <AlertDialogBasic />\n      <AlertDialogSmall />\n      <AlertDialogWithMedia />\n      <AlertDialogSmallWithMedia />\n      <AlertDialogDestructive />\n      <AlertDialogInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertDialogBasic() {\n  return (\n    <Example title=\"Basic\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This will permanently delete your\n              account and remove your data from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmall() {\n  return (\n    <Example title=\"Small\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogWithMedia() {\n  return (\n    <Example title=\"With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Default (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete your account and remove your data\n              from our servers.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction>Continue</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogSmallWithMedia() {\n  return (\n    <Example title=\"Small With Media\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"outline\">Small (Media)</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia>\n              <IconPlaceholder\n                lucide=\"BluetoothIcon\"\n                tabler=\"IconBluetooth\"\n                hugeicons=\"BluetoothIcon\"\n                phosphor=\"BluetoothIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Do you want to allow the USB accessory to connect to this device?\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n            <AlertDialogAction>Allow</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogDestructive() {\n  return (\n    <Example title=\"Destructive\" className=\"items-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button variant=\"destructive\">Delete Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent size=\"sm\">\n          <AlertDialogHeader>\n            <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n              <IconPlaceholder\n                lucide=\"Trash2Icon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"Delete02Icon\"\n                phosphor=\"TrashIcon\"\n              />\n            </AlertDialogMedia>\n            <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This will permanently delete this chat conversation. View{\" \"}\n              <a href=\"#\">Settings</a> delete any memories saved during this\n              chat.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel variant=\"ghost\">Cancel</AlertDialogCancel>\n            <AlertDialogAction variant=\"destructive\">Delete</AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nfunction AlertDialogInDialog() {\n  return (\n    <Example title=\"In Dialog\" className=\"items-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Alert Dialog Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to open an alert dialog.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Open Alert Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/alert-example.json b/apps/v4/public/r/styles/radix-vega/alert-example.json
index 1523a1f71d..146ff4c302 100644
--- a/apps/v4/public/r/styles/radix-vega/alert-example.json
+++ b/apps/v4/public/r/styles/radix-vega/alert-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/alert-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AlertExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <AlertExample1 />\n      <AlertExample2 />\n      <AlertExample3 />\n      <AlertExample4 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AlertExample1() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n        </Alert>\n        <Alert>\n          <AlertTitle>Success! Your changes have been saved.</AlertTitle>\n          <AlertDescription>\n            This is an alert with title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <AlertDescription>\n            This one has a description only. No title. No icon.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample2() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            Let&apos;s try one with icon, title and a <a href=\"#\">link</a>.\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This one has an icon and a description only. No title.{\" \"}\n            <a href=\"#\">But it has a link</a> and a <a href=\"#\">second link</a>.\n          </AlertDescription>\n        </Alert>\n\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Success! Your changes have been saved</AlertTitle>\n          <AlertDescription>\n            This is an alert with icon, title and description.\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content and potentially wraps across multiple\n            lines\n          </AlertTitle>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertDescription>\n            This is a very long alert description that demonstrates how the\n            component handles extended text content and potentially wraps across\n            multiple lines\n          </AlertDescription>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>\n            This is an extremely long alert title that spans multiple lines to\n            demonstrate how the component handles very lengthy headings while\n            maintaining readability and proper text wrapping behavior\n          </AlertTitle>\n          <AlertDescription>\n            This is an equally long description that contains detailed\n            information about the alert. It shows how the component can\n            accommodate extensive content while preserving proper spacing,\n            alignment, and readability across different screen sizes and\n            viewport widths. This helps ensure the user experience remains\n            consistent regardless of the content length.\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample3() {\n  return (\n    <Example title=\"Destructive\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Something went wrong!</AlertTitle>\n          <AlertDescription>\n            Your session has expired. Please log in again.\n          </AlertDescription>\n        </Alert>\n        <Alert variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>Unable to process your payment.</AlertTitle>\n          <AlertDescription>\n            <p>\n              Please verify your <a href=\"#\">billing information</a> and try\n              again.\n            </p>\n            <ul className=\"list-inside list-disc\">\n              <li>Check your card details</li>\n              <li>Ensure sufficient funds</li>\n              <li>Verify billing address</li>\n            </ul>\n          </AlertDescription>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n\nfunction AlertExample4() {\n  return (\n    <Example title=\"With Actions\">\n      <div className=\"mx-auto flex w-full max-w-lg flex-col gap-4\">\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertAction>\n            <Button size=\"xs\">Undo</Button>\n          </AlertAction>\n        </Alert>\n        <Alert>\n          <IconPlaceholder\n            lucide=\"CircleAlertIcon\"\n            tabler=\"IconExclamationCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"WarningCircleIcon\"\n          />\n          <AlertTitle>The selected emails have been marked as spam.</AlertTitle>\n          <AlertDescription>\n            This is a very long alert title that demonstrates how the component\n            handles extended text content.\n          </AlertDescription>\n          <AlertAction>\n            <Badge variant=\"secondary\">Badge</Badge>\n          </AlertAction>\n        </Alert>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/avatar-example.json b/apps/v4/public/r/styles/radix-vega/avatar-example.json
index f64baeeecf..f938b5cad7 100644
--- a/apps/v4/public/r/styles/radix-vega/avatar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/avatar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/avatar-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AvatarExample() {\n  return (\n    <ExampleWrapper>\n      <AvatarSizes />\n      <AvatarWithBadge />\n      <AvatarWithBadgeIcon />\n      <AvatarGroupExample />\n      <AvatarGroupWithCount />\n      <AvatarGroupWithIconCount />\n      <AvatarInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction AvatarSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadge() {\n  return (\n    <Example title=\"Badge\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/jorgezreik.png\"\n            alt=\"@jorgezreik\"\n          />\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>JZ</AvatarFallback>\n          <AvatarBadge />\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarWithBadgeIcon() {\n  return (\n    <Example title=\"Badge with Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/pranathip.png\"\n            alt=\"@pranathip\"\n          />\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Avatar size=\"sm\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar>\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarFallback>PP</AvatarFallback>\n          <AvatarBadge>\n            <IconPlaceholder\n              lucide=\"CheckIcon\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n            />\n          </AvatarBadge>\n        </Avatar>\n      </div>\n    </Example>\n  )\n}\n\nfunction AvatarGroupExample() {\n  return (\n    <Example title=\"Group\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithCount() {\n  return (\n    <Example title=\"Group with Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarGroupWithIconCount() {\n  return (\n    <Example title=\"Group with Icon Count\">\n      <AvatarGroup>\n        <Avatar size=\"sm\">\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"sm\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n      <AvatarGroup>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/shadcn.png\"\n            alt=\"@shadcn\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar size=\"lg\">\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n            className=\"grayscale\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>\n          <IconPlaceholder\n            lucide=\"PlusIcon\"\n            tabler=\"IconPlus\"\n            hugeicons=\"PlusSignIcon\"\n            phosphor=\"PlusIcon\"\n          />\n        </AvatarGroupCount>\n      </AvatarGroup>\n    </Example>\n  )\n}\n\nfunction AvatarInEmpty() {\n  return (\n    <Example title=\"In Empty\">\n      <Empty className=\"w-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                  className=\"grayscale\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n              <AvatarGroupCount>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </AvatarGroupCount>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n            Invite Members\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/badge-example.json b/apps/v4/public/r/styles/radix-vega/badge-example.json
index ac810e0eec..8e5f5a403e 100644
--- a/apps/v4/public/r/styles/radix-vega/badge-example.json
+++ b/apps/v4/public/r/styles/radix-vega/badge-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/badge-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function BadgeExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <BadgeVariants />\n      <BadgeWithIconLeft />\n      <BadgeWithIconRight />\n      <BadgeWithSpinner />\n      <BadgeAsLink />\n      <BadgeLongText />\n      <BadgeCustomColors />\n    </ExampleWrapper>\n  )\n}\n\nfunction BadgeVariants() {\n  return (\n    <Example title=\"Variants\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>Default</Badge>\n        <Badge variant=\"secondary\">Secondary</Badge>\n        <Badge variant=\"destructive\">Destructive</Badge>\n        <Badge variant=\"outline\">Outline</Badge>\n        <Badge variant=\"ghost\">Ghost</Badge>\n        <Badge variant=\"link\">Link</Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconLeft() {\n  return (\n    <Example title=\"Icon Left\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <IconPlaceholder\n            lucide=\"BadgeCheck\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadge02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            data-icon=\"inline-start\"\n          />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithIconRight() {\n  return (\n    <Example title=\"Icon Right\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"secondary\">\n          Secondary\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"destructive\">\n          Destructive\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"outline\">\n          Outline\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"ghost\">\n          Ghost\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n        <Badge variant=\"link\">\n          Link\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeWithSpinner() {\n  return (\n    <Example title=\"With Spinner\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Default\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Secondary\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Destructive\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Outline\n        </Badge>\n        <Badge variant=\"ghost\">\n          <Spinner data-icon=\"inline-start\" />\n          Ghost\n        </Badge>\n        <Badge variant=\"link\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeAsLink() {\n  return (\n    <Example title=\"asChild\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge asChild>\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"secondary\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"destructive\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"outline\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRightIcon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"ghost\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n        <Badge asChild variant=\"link\">\n          <a href=\"#\">\n            Link{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </a>\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeLongText() {\n  return (\n    <Example title=\"Long Text\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge variant=\"secondary\">\n          A badge with a lot of text to see how it wraps\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeCustomColors() {\n  return (\n    <Example title=\"Custom Colors\" className=\"max-w-fit\">\n      <div className=\"flex flex-wrap gap-2\">\n        <Badge className=\"bg-blue-600 text-blue-50 dark:bg-blue-600 dark:text-blue-50\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-600 text-green-50 dark:bg-green-600 dark:text-green-50\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-600 text-sky-50 dark:bg-sky-600 dark:text-sky-50\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-600 text-purple-50 dark:bg-purple-600 dark:text-purple-50\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">\n          Blue\n        </Badge>\n        <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n          Green\n        </Badge>\n        <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">\n          Sky\n        </Badge>\n        <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n          Purple\n        </Badge>\n        <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">\n          Red\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/breadcrumb.json b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
index 67d8b5439e..c0bd841068 100644
--- a/apps/v4/public/r/styles/radix-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/button-example.json b/apps/v4/public/r/styles/radix-vega/button-example.json
index ac625e4d87..561c786911 100644
--- a/apps/v4/public/r/styles/radix-vega/button-example.json
+++ b/apps/v4/public/r/styles/radix-vega/button-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/button-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1 2xl:grid-cols-1\">\n      <ButtonVariantsAndSizes />\n      <ButtonIconRight />\n      <ButtonIconLeft />\n      <ButtonIconOnly />\n      <ButtonInvalidStates />\n      <ButtonExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonVariantsAndSizes() {\n  return (\n    <Example title=\"Variants & Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">Default</Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">Default</Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>Default</Button>\n        <Button variant=\"secondary\">Secondary</Button>\n        <Button variant=\"outline\">Outline</Button>\n        <Button variant=\"ghost\">Ghost</Button>\n        <Button variant=\"destructive\">Destructive</Button>\n        <Button variant=\"link\">Link</Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">Default</Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconRight() {\n  return (\n    <Example title=\"Icon Right\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          Default\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          Default{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          Secondary{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          Outline{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          Ghost{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          Destructive{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          Link{\" \"}\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconLeft() {\n  return (\n    <Example title=\"Icon Left\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button>\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftCircleIcon\"\n            hugeicons=\"CircleArrowLeft02Icon\"\n            tabler=\"IconCircleArrowLeft\"\n            phosphor=\"ArrowCircleLeftIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-xs\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-xs\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-sm\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-sm\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"icon-lg\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"secondary\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"ghost\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"destructive\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n        <Button size=\"icon-lg\" variant=\"link\">\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight02Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonExamples() {\n  return (\n    <Example title=\"Examples\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>\n            Submit{\" \"}\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"destructive\">Delete</Button>\n          <Button size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight02Icon\"\n              phosphor=\"ArrowRightIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonInvalidStates() {\n  return (\n    <Example title=\"Invalid States\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"xs\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"xs\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"xs\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"xs\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"xs\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"xs\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"sm\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"sm\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"sm\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button aria-invalid=\"true\">Default</Button>\n        <Button variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Button size=\"lg\" aria-invalid=\"true\">\n          Default\n        </Button>\n        <Button size=\"lg\" variant=\"secondary\" aria-invalid=\"true\">\n          Secondary\n        </Button>\n        <Button size=\"lg\" variant=\"outline\" aria-invalid=\"true\">\n          Outline\n        </Button>\n        <Button size=\"lg\" variant=\"ghost\" aria-invalid=\"true\">\n          Ghost\n        </Button>\n        <Button size=\"lg\" variant=\"destructive\" aria-invalid=\"true\">\n          Destructive\n        </Button>\n        <Button size=\"lg\" variant=\"link\" aria-invalid=\"true\">\n          Link\n        </Button>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/button-group-example.json b/apps/v4/public/r/styles/radix-vega/button-group-example.json
index f190c00713..d326656a92 100644
--- a/apps/v4/public/r/styles/radix-vega/button-group-example.json
+++ b/apps/v4/public/r/styles/radix-vega/button-group-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/button-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ButtonGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ButtonGroupBasic />\n      <ButtonGroupWithInput />\n      <ButtonGroupWithText />\n      <ButtonGroupWithDropdown />\n      <ButtonGroupWithSelect />\n      <ButtonGroupWithIcons />\n      <ButtonGroupWithInputGroup />\n      <ButtonGroupWithFields />\n      <ButtonGroupWithLike />\n      <ButtonGroupWithSelectAndInput />\n      <ButtonGroupNested />\n      <ButtonGroupPagination />\n      <ButtonGroupPaginationSplit />\n      <ButtonGroupNavigation />\n      <ButtonGroupTextAlignment />\n      <ButtonGroupVertical />\n      <ButtonGroupVerticalNested />\n    </ExampleWrapper>\n  )\n}\n\nfunction ButtonGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Button</Button>\n          <Input placeholder=\"Type something here...\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Input placeholder=\"Type something here...\" />\n          <Button variant=\"outline\">Button</Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithText() {\n  return (\n    <Example title=\"With Text\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <ButtonGroupText>Text</ButtonGroupText>\n          <Button variant=\"outline\">Another Button</Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <ButtonGroupText asChild>\n            <Label htmlFor=\"input-text\">GPU Size</Label>\n          </ButtonGroupText>\n          <Input id=\"input-text\" placeholder=\"Type something here...\" />\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">Update</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Disable</DropdownMenuItem>\n              <DropdownMenuItem variant=\"destructive\">\n                Uninstall\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">Follow</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-50\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"VolumeOffIcon\"\n                    tabler=\"IconVolume\"\n                    hugeicons=\"VolumeOffIcon\"\n                    phosphor=\"SpeakerSlashIcon\"\n                  />\n                  Mute Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                  />\n                  Mark as Read\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"AlertTriangleIcon\"\n                    tabler=\"IconAlertTriangle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningIcon\"\n                  />\n                  Report Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"UserRoundXIcon\"\n                    tabler=\"IconUserX\"\n                    hugeicons=\"UserRemove01Icon\"\n                    phosphor=\"UserMinusIcon\"\n                  />\n                  Block User\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                  />\n                  Share Conversation\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete Conversation\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelect() {\n  const [currency, setCurrency] = useState(\"$\")\n\n  return (\n    <Example title=\"With Select\">\n      <Field>\n        <Label htmlFor=\"amount\">Amount</Label>\n        <ButtonGroup>\n          <Select value={currency} onValueChange={setCurrency}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent align=\"start\">\n              <SelectItem value=\"$\">$</SelectItem>\n              <SelectItem value=\"€\">€</SelectItem>\n              <SelectItem value=\"£\">£</SelectItem>\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"Enter amount to send\" />\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithInputGroup() {\n  return (\n    <Example title=\"With Input Group\">\n      <div className=\"flex flex-col gap-4\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Type to search...\" />\n          <InputGroupAddon\n            align=\"inline-start\"\n            className=\"text-muted-foreground\"\n          >\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithFields() {\n  return (\n    <Example title=\"With Fields\">\n      <FieldGroup className=\"grid grid-cols-3 gap-4\">\n        <Field className=\"col-span-2\">\n          <Label htmlFor=\"width\">Width</Label>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput id=\"width\" />\n              <InputGroupAddon className=\"text-muted-foreground\">\n                W\n              </InputGroupAddon>\n              <InputGroupAddon\n                align=\"inline-end\"\n                className=\"text-muted-foreground\"\n              >\n                px\n              </InputGroupAddon>\n            </InputGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MinusIcon\"\n                tabler=\"IconMinus\"\n                hugeicons=\"MinusSignIcon\"\n                phosphor=\"MinusIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithLike() {\n  return (\n    <Example title=\"With Like\">\n      <ButtonGroup>\n        <Button variant=\"outline\">\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"Notification02Icon\"\n            phosphor=\"HeartIcon\"\n            data-icon=\"inline-start\"\n          />{\" \"}\n          Like\n        </Button>\n        <Button variant=\"outline\" asChild size=\"icon\" className=\"w-12\">\n          <span>1.2K</span>\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupWithSelectAndInput() {\n  return (\n    <Example title=\"With Select and Input\">\n      <ButtonGroup>\n        <Select defaultValue=\"hours\">\n          <SelectTrigger id=\"duration\">\n            <SelectValue placeholder=\"Select duration\" />\n          </SelectTrigger>\n          <SelectContent align=\"start\">\n            <SelectItem value=\"hours\">Hours</SelectItem>\n            <SelectItem value=\"days\">Days</SelectItem>\n            <SelectItem value=\"weeks\">Weeks</SelectItem>\n          </SelectContent>\n        </Select>\n        <Input />\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNested() {\n  return (\n    <Example title=\"Nested\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <InputGroup>\n            <InputGroupInput placeholder=\"Send a message...\" />\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconHeadphones\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupAddon>\n              </TooltipTrigger>\n              <TooltipContent>Voice Mode</TooltipContent>\n            </Tooltip>\n          </InputGroup>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPagination() {\n  return (\n    <Example title=\"Pagination\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n            data-icon=\"inline-start\"\n          />\n          Previous\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Next\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n            data-icon=\"inline-end\"\n          />\n        </Button>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupPaginationSplit() {\n  return (\n    <Example title=\"Pagination Split\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"sm\">\n            1\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            2\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            3\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            4\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            5\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon-xs\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupNavigation() {\n  return (\n    <Example title=\"Navigation\">\n      <ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ArrowRightIcon\"\n              tabler=\"IconArrowRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"ArrowRightIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup aria-label=\"Single navigation button\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ArrowLeftIcon\"\n              tabler=\"IconArrowLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"ArrowLeftIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n\nfunction ButtonGroupTextAlignment() {\n  return (\n    <Example title=\"Text Alignment\">\n      <Field>\n        <Label id=\"alignment-label\">Text Alignment</Label>\n        <ButtonGroup aria-labelledby=\"alignment-label\">\n          <Button variant=\"outline\" size=\"sm\">\n            Left\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Center\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Right\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            Justify\n          </Button>\n        </ButtonGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex gap-6\">\n        <ButtonGroup\n          orientation=\"vertical\"\n          aria-label=\"Media controls\"\n          className=\"h-fit\"\n        >\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"MinusIcon\"\n              tabler=\"IconMinus\"\n              hugeicons=\"MinusSignIcon\"\n              phosphor=\"MinusIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ButtonGroupVerticalNested() {\n  return (\n    <Example title=\"Vertical Nested\">\n      <ButtonGroup orientation=\"vertical\" aria-label=\"Design tools palette\">\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"CopyIcon\"\n              tabler=\"IconCopy\"\n              hugeicons=\"Copy01Icon\"\n              phosphor=\"CopyIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"Share03Icon\"\n              phosphor=\"ShareIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup orientation=\"vertical\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipHorizontalIcon\"\n              tabler=\"IconFlipHorizontal\"\n              hugeicons=\"FlipHorizontalIcon\"\n              phosphor=\"ArrowsHorizontalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"FlipVerticalIcon\"\n              tabler=\"IconFlipVertical\"\n              hugeicons=\"FlipVerticalIcon\"\n              phosphor=\"ArrowsVerticalIcon\"\n            />\n          </Button>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"RotateCwIcon\"\n              tabler=\"IconRotateClockwise2\"\n              hugeicons=\"Rotate01Icon\"\n              phosphor=\"ArrowClockwiseIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"Delete02Icon\"\n              phosphor=\"TrashIcon\"\n            />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar-example.json b/apps/v4/public/r/styles/radix-vega/calendar-example.json
index 3a5448d32a..c7dce00b12 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/bases/radix/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar.json b/apps/v4/public/r/styles/radix-vega/calendar.json
index af5108269f..fcfe05fe78 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/card-example.json b/apps/v4/public/r/styles/radix-vega/card-example.json
index 6024130937..049b665ac4 100644
--- a/apps/v4/public/r/styles/radix-vega/card-example.json
+++ b/apps/v4/public/r/styles/radix-vega/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/carousel.json b/apps/v4/public/r/styles/radix-vega/carousel.json
index 341123a248..15ea3a21e2 100644
--- a/apps/v4/public/r/styles/radix-vega/carousel.json
+++ b/apps/v4/public/r/styles/radix-vega/carousel.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/carousel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n      />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n      />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/chart-example.json b/apps/v4/public/r/styles/radix-vega/chart-example.json
index 4ecf0a2f89..f841bcc86b 100644
--- a/apps/v4/public/r/styles/radix-vega/chart-example.json
+++ b/apps/v4/public/r/styles/radix-vega/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/chatgpt.json b/apps/v4/public/r/styles/radix-vega/chatgpt.json
index 6331f1a395..c475fa6d89 100644
--- a/apps/v4/public/r/styles/radix-vega/chatgpt.json
+++ b/apps/v4/public/r/styles/radix-vega/chatgpt.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/checkbox.json b/apps/v4/public/r/styles/radix-vega/checkbox.json
index 204869fed3..a84f243baf 100644
--- a/apps/v4/public/r/styles/radix-vega/checkbox.json
+++ b/apps/v4/public/r/styles/radix-vega/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/collapsible-example.json b/apps/v4/public/r/styles/radix-vega/collapsible-example.json
index dcdc96b148..7d6d83e404 100644
--- a/apps/v4/public/r/styles/radix-vega/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-vega/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/combobox-example.json b/apps/v4/public/r/styles/radix-vega/combobox-example.json
index fa8085fa20..2ef55060b4 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/combobox.json b/apps/v4/public/r/styles/radix-vega/combobox.json
index 782359f347..f684a442ef 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground size-4 pointer-events-none\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/command-example.json b/apps/v4/public/r/styles/radix-vega/command-example.json
index 6ee2e9fa74..c3f8728599 100644
--- a/apps/v4/public/r/styles/radix-vega/command-example.json
+++ b/apps/v4/public/r/styles/radix-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/bases/radix/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/command.json b/apps/v4/public/r/styles/radix-vega/command.json
index 0283528bc2..6bea467685 100644
--- a/apps/v4/public/r/styles/radix-vega/command.json
+++ b/apps/v4/public/r/styles/radix-vega/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"rounded-xl! overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        className=\"ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/component-example.json b/apps/v4/public/r/styles/radix-vega/component-example.json
index 96dd8f148f..7c7b4f11a4 100644
--- a/apps/v4/public/r/styles/radix-vega/component-example.json
+++ b/apps/v4/public/r/styles/radix-vega/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/component-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/context-menu-example.json b/apps/v4/public/r/styles/radix-vega/context-menu-example.json
index 8525d21077..da68334e49 100644
--- a/apps/v4/public/r/styles/radix-vega/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from \"@/registry/bases/radix/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ContextMenuExample() {\n  return (\n    <ExampleWrapper>\n      <ContextMenuBasic />\n      <ContextMenuWithSides />\n      <ContextMenuWithIcons />\n      <ContextMenuWithShortcuts />\n      <ContextMenuWithSubmenu />\n      <ContextMenuWithGroups />\n      <ContextMenuWithCheckboxes />\n      <ContextMenuWithRadio />\n      <ContextMenuWithDestructive />\n      <ContextMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction ContextMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>Back</ContextMenuItem>\n            <ContextMenuItem disabled>Forward</ContextMenuItem>\n            <ContextMenuItem>Reload</ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n              />\n              Copy\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n              />\n              Cut\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ClipboardPasteIcon\"\n                tabler=\"IconClipboard\"\n                hugeicons=\"ClipboardIcon\"\n                phosphor=\"ClipboardIcon\"\n              />\n              Paste\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Back\n              <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem disabled>\n              Forward\n              <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Reload\n              <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save As...\n              <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSub>\n            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>\n            <ContextMenuSubContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>Save Page...</ContextMenuItem>\n                <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                <ContextMenuItem>Name Window...</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem>Developer Tools</ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">Delete</ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuSubContent>\n          </ContextMenuSub>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithGroups() {\n  return (\n    <Example title=\"With Groups, Labels & Separators\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>File</ContextMenuLabel>\n            <ContextMenuItem>\n              New File\n              <ContextMenuShortcut>⌘N</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Open File\n              <ContextMenuShortcut>⌘O</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Save\n              <ContextMenuShortcut>⌘S</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Edit</ContextMenuLabel>\n            <ContextMenuItem>\n              Undo\n              <ContextMenuShortcut>⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Redo\n              <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuSeparator />\n            <ContextMenuItem>\n              Cut\n              <ContextMenuShortcut>⌘X</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Copy\n              <ContextMenuShortcut>⌘C</ContextMenuShortcut>\n            </ContextMenuItem>\n            <ContextMenuItem>\n              Paste\n              <ContextMenuShortcut>⌘V</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem variant=\"destructive\">\n              Delete\n              <ContextMenuShortcut>⌫</ContextMenuShortcut>\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithCheckboxes() {\n  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)\n  const [showFullUrls, setShowFullUrls] = React.useState(false)\n  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuCheckboxItem\n              checked={showBookmarksBar}\n              onCheckedChange={setShowBookmarksBar}\n            >\n              Show Bookmarks Bar\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showFullUrls}\n              onCheckedChange={setShowFullUrls}\n            >\n              Show Full URLs\n            </ContextMenuCheckboxItem>\n            <ContextMenuCheckboxItem\n              checked={showDeveloperTools}\n              onCheckedChange={setShowDeveloperTools}\n            >\n              Show Developer Tools\n            </ContextMenuCheckboxItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithRadio() {\n  const [user, setUser] = React.useState(\"pedro\")\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuLabel>People</ContextMenuLabel>\n            <ContextMenuRadioGroup value={user} onValueChange={setUser}>\n              <ContextMenuRadioItem value=\"pedro\">\n                Pedro Duarte\n              </ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"colm\">\n                Colm Tuite\n              </ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuLabel>Theme</ContextMenuLabel>\n            <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <ContextMenuRadioItem value=\"light\">Light</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"dark\">Dark</ContextMenuRadioItem>\n              <ContextMenuRadioItem value=\"system\">System</ContextMenuRadioItem>\n            </ContextMenuRadioGroup>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <ContextMenu>\n        <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n          Right click here\n        </ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </ContextMenuItem>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </ContextMenuItem>\n          </ContextMenuGroup>\n          <ContextMenuSeparator />\n          <ContextMenuGroup>\n            <ContextMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </ContextMenuItem>\n            <ContextMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </ContextMenuItem>\n          </ContextMenuGroup>\n        </ContextMenuContent>\n      </ContextMenu>\n    </Example>\n  )\n}\n\nfunction ContextMenuWithSides() {\n  return (\n    <Example title=\"With Sides\">\n      <div className=\"grid grid-cols-2 gap-6\">\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (top)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"top\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (right)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"right\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (bottom)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"bottom\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n        <ContextMenu>\n          <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n            Right click (left)\n          </ContextMenuTrigger>\n          <ContextMenuContent side=\"left\">\n            <ContextMenuGroup>\n              <ContextMenuItem>Back</ContextMenuItem>\n              <ContextMenuItem>Forward</ContextMenuItem>\n              <ContextMenuItem>Reload</ContextMenuItem>\n            </ContextMenuGroup>\n          </ContextMenuContent>\n        </ContextMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction ContextMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Context Menu Example</DialogTitle>\n            <DialogDescription>\n              Right click on the area below to see the context menu.\n            </DialogDescription>\n          </DialogHeader>\n          <ContextMenu>\n            <ContextMenuTrigger className=\"flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm\">\n              Right click here\n            </ContextMenuTrigger>\n            <ContextMenuContent>\n              <ContextMenuGroup>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </ContextMenuItem>\n                <ContextMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </ContextMenuItem>\n              </ContextMenuGroup>\n              <ContextMenuSeparator />\n              <ContextMenuSub>\n                <ContextMenuSubTrigger>More Options</ContextMenuSubTrigger>\n                <ContextMenuSubContent>\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Save Page...</ContextMenuItem>\n                    <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n                    <ContextMenuItem>Name Window...</ContextMenuItem>\n                  </ContextMenuGroup>\n                  <ContextMenuSeparator />\n                  <ContextMenuGroup>\n                    <ContextMenuItem>Developer Tools</ContextMenuItem>\n                  </ContextMenuGroup>\n                </ContextMenuSubContent>\n              </ContextMenuSub>\n              <ContextMenuSeparator />\n              <ContextMenuGroup>\n                <ContextMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </ContextMenuItem>\n              </ContextMenuGroup>\n            </ContextMenuContent>\n          </ContextMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/context-menu.json b/apps/v4/public/r/styles/radix-vega/context-menu.json
index f94d19cbd4..cc35ae7f7f 100644
--- a/apps/v4/public/r/styles/radix-vega/context-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dialog-example.json b/apps/v4/public/r/styles/radix-vega/dialog-example.json
index 38f3904abb..746f459504 100644
--- a/apps/v4/public/r/styles/radix-vega/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"light\">Light</SelectItem>\n                            <SelectItem value=\"dark\">Dark</SelectItem>\n                            <SelectItem value=\"system\">System</SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectItem value=\"default\">\n                              <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                              Default\n                            </SelectItem>\n                            <SelectItem value=\"red\">\n                              <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                              Red\n                            </SelectItem>\n                            <SelectItem value=\"blue\">\n                              <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                              Blue\n                            </SelectItem>\n                            <SelectItem value=\"green\">\n                              <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                              Green\n                            </SelectItem>\n                            <SelectItem value=\"purple\">\n                              <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                              Purple\n                            </SelectItem>\n                            <SelectItem value=\"pink\">\n                              <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                              Pink\n                            </SelectItem>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectItem value=\"auto\">Auto</SelectItem>\n                            <SelectSeparator />\n                            {spokenLanguages.map((language) => (\n                              <SelectItem\n                                key={language.value}\n                                value={language.value}\n                              >\n                                {language.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            {voices.map((voice) => (\n                              <SelectItem key={voice.value} value={voice.value}>\n                                {voice.label}\n                              </SelectItem>\n                            ))}\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dialog.json b/apps/v4/public/r/styles/radix-vega/dialog.json
index c0dc17fd4b..93d18519f4 100644
--- a/apps/v4/public/r/styles/radix-vega/dialog.json
+++ b/apps/v4/public/r/styles/radix-vega/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"gap-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
index 8b2246d805..d636befef6 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
index 1bcbce5b89..4c61637969 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/empty-example.json b/apps/v4/public/r/styles/radix-vega/empty-example.json
index c70b675cd8..36ed542ea4 100644
--- a/apps/v4/public/r/styles/radix-vega/empty-example.json
+++ b/apps/v4/public/r/styles/radix-vega/empty-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/empty-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function EmptyExample() {\n  return (\n    <ExampleWrapper>\n      <EmptyBasic />\n      <EmptyWithMutedBackground />\n      <EmptyWithBorder />\n      <EmptyWithIcon />\n      <EmptyWithMutedBackgroundAlt />\n      <EmptyInCard />\n    </ExampleWrapper>\n  )\n}\n\nfunction EmptyBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackground() {\n  return (\n    <Example title=\"With Muted Background\">\n      <Empty className=\"bg-muted\">\n        <EmptyHeader>\n          <EmptyTitle>No results found</EmptyTitle>\n          <EmptyDescription>\n            No results found for your search. Try adjusting your search terms.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button>Try again</Button>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithBorder() {\n  return (\n    <Example title=\"With Border\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Empty className=\"border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>Nothing to see here</EmptyTitle>\n          <EmptyDescription>\n            No posts have been created yet. Get started by{\" \"}\n            <a href=\"#\">creating your first post</a>.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <Button variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-start\"\n            />\n            New Post\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyWithMutedBackgroundAlt() {\n  return (\n    <Example title=\"With Muted Background Alt\">\n      <Empty className=\"bg-muted/50\">\n        <EmptyHeader>\n          <EmptyTitle>404 - Not Found</EmptyTitle>\n          <EmptyDescription>\n            The page you&apos;re looking for doesn&apos;t exist. Try searching\n            for what you need below.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <InputGroup className=\"w-3/4\">\n            <InputGroupInput placeholder=\"Try searching for pages...\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"CircleDashedIcon\"\n                tabler=\"IconCircleDashed\"\n                hugeicons=\"DashedLineCircleIcon\"\n                phosphor=\"CircleDashedIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>/</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <EmptyDescription>\n            Need help? <a href=\"#\">Contact support</a>\n          </EmptyDescription>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction EmptyInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Empty>\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n            />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowUpRightIcon\"\n                tabler=\"IconArrowUpRight\"\n                hugeicons=\"ArrowUpRight01Icon\"\n                phosphor=\"ArrowUpRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/github.json b/apps/v4/public/r/styles/radix-vega/github.json
index b43443ebb8..de00d624a9 100644
--- a/apps/v4/public/r/styles/radix-vega/github.json
+++ b/apps/v4/public/r/styles/radix-vega/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/bases/radix/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/bases/radix/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport { NativeSelect } from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n              />\n              Sign out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-group-example.json b/apps/v4/public/r/styles/radix-vega/input-group-example.json
index f7453452e7..dbdbed6d76 100644
--- a/apps/v4/public/r/styles/radix-vega/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp-example.json b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
index 1226e71eb9..76ebc2494f 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/bases/radix/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp.json b/apps/v4/public/r/styles/radix-vega/input-otp.json
index 3c49107919..126196acd5 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/item-example.json b/apps/v4/public/r/styles/radix-vega/item-example.json
index e6e79a8ffd..1df624b609 100644
--- a/apps/v4/public/r/styles/radix-vega/item-example.json
+++ b/apps/v4/public/r/styles/radix-vega/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/kbd-example.json b/apps/v4/public/r/styles/radix-vega/kbd-example.json
index ee2ad4b76d..488fa5f60f 100644
--- a/apps/v4/public/r/styles/radix-vega/kbd-example.json
+++ b/apps/v4/public/r/styles/radix-vega/kbd-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/kbd-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function KbdExample() {\n  return (\n    <ExampleWrapper>\n      <KbdBasic />\n      <KbdModifierKeys />\n      <KbdGroupExample />\n      <KbdArrowKeys />\n      <KbdWithIcons />\n      <KbdWithIconsAndText />\n      <KbdInInputGroup />\n      <KbdInTooltip />\n      <KbdWithSamp />\n    </ExampleWrapper>\n  )\n}\n\nfunction KbdBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>Ctrl</Kbd>\n        <Kbd>⌘K</Kbd>\n        <Kbd>Ctrl + B</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdModifierKeys() {\n  return (\n    <Example title=\"Modifier Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>⌘</Kbd>\n        <Kbd>C</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdGroupExample() {\n  return (\n    <Example title=\"KbdGroup\">\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>Shift</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdArrowKeys() {\n  return (\n    <Example title=\"Arrow Keys\">\n      <div className=\"flex items-center gap-2\">\n        <Kbd>↑</Kbd>\n        <Kbd>↓</Kbd>\n        <Kbd>←</Kbd>\n        <Kbd>→</Kbd>\n      </div>\n    </Example>\n  )\n}\n\nfunction KbdWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowRightIcon\"\n            tabler=\"IconArrowRight\"\n            hugeicons=\"ArrowRight01Icon\"\n            phosphor=\"ArrowRightIcon\"\n          />\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdWithIconsAndText() {\n  return (\n    <Example title=\"With Icons and Text\">\n      <KbdGroup>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"ArrowLeftIcon\"\n            tabler=\"IconArrowLeft\"\n            hugeicons=\"ArrowLeft01Icon\"\n            phosphor=\"ArrowLeftIcon\"\n          />\n          Left\n        </Kbd>\n        <Kbd>\n          <IconPlaceholder\n            lucide=\"CircleDashedIcon\"\n            tabler=\"IconCircleDashed\"\n            hugeicons=\"DashedLineCircleIcon\"\n            phosphor=\"CircleDashedIcon\"\n          />\n          Voice Enabled\n        </Kbd>\n      </KbdGroup>\n    </Example>\n  )\n}\n\nfunction KbdInInputGroup() {\n  return (\n    <Example title=\"InputGroup\">\n      <InputGroup>\n        <InputGroupInput />\n        <InputGroupAddon>\n          <Kbd>Space</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n\nfunction KbdInTooltip() {\n  return (\n    <Example title=\"Tooltip\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button size=\"icon-sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction KbdWithSamp() {\n  return (\n    <Example title=\"With samp\">\n      <Kbd>\n        <samp>File</samp>\n      </Kbd>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/menubar-example.json b/apps/v4/public/r/styles/radix-vega/menubar-example.json
index 66dc9caf4e..e870b9dd55 100644
--- a/apps/v4/public/r/styles/radix-vega/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/bases/radix/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled>New Incognito Window</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Email link</MenubarItem>\n                  <MenubarItem>Messages</MenubarItem>\n                  <MenubarItem>Notes</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Find...</MenubarItem>\n                  <MenubarItem>Find Next</MenubarItem>\n                  <MenubarItem>Find Previous</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>Cut</MenubarItem>\n              <MenubarItem>Copy</MenubarItem>\n              <MenubarItem>Paste</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarGroup>\n              <MenubarCheckboxItem>\n                Always Show Bookmarks Bar\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem checked>\n                Always Show Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>\n                Reload <MenubarShortcut>⌘R</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem disabled inset>\n                Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Edit...</MenubarItem>\n              <MenubarItem inset>Add Profile...</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SaveIcon\"\n                  tabler=\"IconDeviceFloppy\"\n                  hugeicons=\"FloppyDiskIcon\"\n                  phosphor=\"FloppyDiskIcon\"\n                />\n                Save <MenubarShortcut>⌘S</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                New Window <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Print... <MenubarShortcut>⌘P</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                Cut <MenubarShortcut>⌘X</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Copy <MenubarShortcut>⌘C</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                Paste <MenubarShortcut>⌘V</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"BoldIcon\"\n                  tabler=\"IconBold\"\n                  hugeicons=\"TextBoldIcon\"\n                  phosphor=\"TextBIcon\"\n                />\n                Bold <MenubarShortcut>⌘B</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ItalicIcon\"\n                  tabler=\"IconItalic\"\n                  hugeicons=\"TextItalicIcon\"\n                  phosphor=\"TextItalicIcon\"\n                />\n                Italic <MenubarShortcut>⌘I</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UnderlineIcon\"\n                  tabler=\"IconUnderline\"\n                  hugeicons=\"TextUnderlineIcon\"\n                  phosphor=\"TextUnderlineIcon\"\n                />\n                Underline <MenubarShortcut>⌘U</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n              <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem inset>Zoom In</MenubarItem>\n              <MenubarItem inset>Zoom Out</MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Image</MenubarItem>\n                  <MenubarItem>Video</MenubarItem>\n                  <MenubarItem>Audio</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"LinkIcon\"\n                  tabler=\"IconLink\"\n                  hugeicons=\"LinkIcon\"\n                  phosphor=\"LinkIcon\"\n                />\n                Link <MenubarShortcut>⌘K</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"TableIcon\"\n                  tabler=\"IconTable\"\n                  hugeicons=\"TableIcon\"\n                  phosphor=\"TableIcon\"\n                />\n                Table\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                />\n                Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                />\n                Spell Check\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FileIcon\"\n                  tabler=\"IconFile\"\n                  hugeicons=\"FileIcon\"\n                  phosphor=\"FileIcon\"\n                />\n                New File <MenubarShortcut>⌘N</MenubarShortcut>\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                />\n                Open Folder\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                />\n                Profile\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                />\n                Settings\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                />\n                Sign out\n              </MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"CopyIcon\"\n                      tabler=\"IconCopy\"\n                      hugeicons=\"CopyIcon\"\n                      phosphor=\"CopyIcon\"\n                    />\n                    Copy\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ScissorsIcon\"\n                      tabler=\"IconCut\"\n                      hugeicons=\"ScissorIcon\"\n                      phosphor=\"ScissorsIcon\"\n                    />\n                    Cut\n                  </MenubarItem>\n                  <MenubarItem>\n                    <IconPlaceholder\n                      lucide=\"ClipboardPasteIcon\"\n                      tabler=\"IconClipboard\"\n                      hugeicons=\"ClipboardIcon\"\n                      phosphor=\"ClipboardIcon\"\n                    />\n                    Paste\n                  </MenubarItem>\n                </MenubarGroup>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarGroup>\n                      <MenubarItem>Save Page...</MenubarItem>\n                      <MenubarItem>Create Shortcut...</MenubarItem>\n                      <MenubarItem>Name Window...</MenubarItem>\n                    </MenubarGroup>\n                    <MenubarSeparator />\n                    <MenubarGroup>\n                      <MenubarItem>Developer Tools</MenubarItem>\n                    </MenubarGroup>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarGroup>\n                  <MenubarItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"TrashIcon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"DeleteIcon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Delete\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarGroup>\n                  <MenubarItem>\n                    Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                  <MenubarItem>\n                    Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                  </MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/menubar.json b/apps/v4/public/r/styles/radix-vega/menubar.json
index 1e6b593985..bbf9c9faba 100644
--- a/apps/v4/public/r/styles/radix-vega/menubar.json
+++ b/apps/v4/public/r/styles/radix-vega/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        className=\"ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/native-select.json b/apps/v4/public/r/styles/radix-vega/native-select.json
index 61928819a3..e33dbbca1a 100644
--- a/apps/v4/public/r/styles/radix-vega/native-select.json
+++ b/apps/v4/public/r/styles/radix-vega/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
index 96b645b5e4..5ca64c770a 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/bases/radix/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu.json b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
index 0a9214508a..187b01e53e 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"max-w-max group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"gap-0 group flex flex-1 list-none items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/pagination.json b/apps/v4/public/r/styles/radix-vega/pagination.json
index fa4d02a923..6407e572e9 100644
--- a/apps/v4/public/r/styles/radix-vega/pagination.json
+++ b/apps/v4/public/r/styles/radix-vega/pagination.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/pagination.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\n        \"mx-auto flex w-full justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"gap-1 flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">\n\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <Button\n      asChild\n      variant={isActive ? \"outline\" : \"ghost\"}\n      size={size}\n      className={cn(className)}\n    >\n      <a\n        aria-current={isActive ? \"page\" : undefined}\n        data-slot=\"pagination-link\"\n        data-active={isActive}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"pl-2!\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronLeftIcon\"\n        tabler=\"IconChevronLeft\"\n        hugeicons=\"ArrowLeft01Icon\"\n        phosphor=\"CaretLeftIcon\"\n        data-icon=\"inline-start\"\n      />\n      <span className=\"hidden sm:block\">\n        Previous\n      </span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"pr-2!\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        data-icon=\"inline-end\"\n      />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\n        \"size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n      />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/preview.json b/apps/v4/public/r/styles/radix-vega/preview.json
index ac2dcebcd1..0ba534b272 100644
--- a/apps/v4/public/r/styles/radix-vega/preview.json
+++ b/apps/v4/public/r/styles/radix-vega/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/bases/radix/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { ButtonGroup } from \"@/registry/bases/radix/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport { Checkbox } from \"@/registry/bases/radix/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/bases/radix/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/bases/radix/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { Switch } from \"@/registry/bases/radix/ui/switch\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/progress-example.json b/apps/v4/public/r/styles/radix-vega/progress-example.json
index 6b545b426d..f15a9a9e2e 100644
--- a/apps/v4/public/r/styles/radix-vega/progress-example.json
+++ b/apps/v4/public/r/styles/radix-vega/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/progress-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Progress } from \"@/registry/bases/radix/ui/progress\"\nimport { Slider } from \"@/registry/bases/radix/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/radio-group.json b/apps/v4/public/r/styles/radix-vega/radio-group.json
index f364318a38..1434a9d83d 100644
--- a/apps/v4/public/r/styles/radix-vega/radio-group.json
+++ b/apps/v4/public/r/styles/radix-vega/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/select-example.json b/apps/v4/public/r/styles/radix-vega/select-example.json
index 1b17030878..dc9734289a 100644
--- a/apps/v4/public/r/styles/radix-vega/select-example.json
+++ b/apps/v4/public/r/styles/radix-vega/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/bases/radix/ui/field\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/select.json b/apps/v4/public/r/styles/radix-vega/select.json
index c56b3bd6c3..cc6d2f491b 100644
--- a/apps/v4/public/r/styles/radix-vega/select.json
+++ b/apps/v4/public/r/styles/radix-vega/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          className=\"text-muted-foreground size-4 pointer-events-none\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sheet.json b/apps/v4/public/r/styles/radix-vega/sheet.json
index 69879d9ec8..e859ed251d 100644
--- a/apps/v4/public/r/styles/radix-vega/sheet.json
+++ b/apps/v4/public/r/styles/radix-vega/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\", className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button variant=\"ghost\" className=\"absolute top-4 right-4\" size=\"icon-sm\">\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"gap-1.5 p-4 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-example.json
index 6aaad1cd5b..0299a2507c 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport { Label } from \"@/registry/bases/radix/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
index b320b06f94..076eca5ce6 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Field } from \"@/registry/bases/radix/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Building Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
index 84ffd4fd03..b0a351579f 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/radix/ui/avatar\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
index 8251852239..01037816b5 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/bases/radix/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/bases/radix/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar.json b/apps/v4/public/r/styles/radix-vega/sidebar.json
index fc5187ab2d..9639a7991f 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport { Separator } from \"@/registry/bases/radix/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/bases/radix/ui/sheet\"\nimport { Skeleton } from \"@/registry/bases/radix/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offExamples\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offExamples\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent\",\n          \"group-data-[collapsible=offExamples]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:translate-x-0 group-data-[collapsible=offExamples]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offExamples]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offExamples]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 relative flex w-full flex-1 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"gap-2 p-2 flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar gap-2 flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"p-2 relative flex w-full min-w-0 flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"text-sm w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"gap-1 flex w-full min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline: \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 rounded-md px-1 text-xs font-medium 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 flex items-center justify-center tabular-nums select-none group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"h-8 gap-2 rounded-md px-2 flex items-center\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\"border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sonner.json b/apps/v4/public/r/styles/radix-vega/sonner.json
index 5954e1d175..ebfc0647a5 100644
--- a/apps/v4/public/r/styles/radix-vega/sonner.json
+++ b/apps/v4/public/r/styles/radix-vega/sonner.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sonner.tsx",
-      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
+      "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner, type ToasterProps } from \"sonner\"\n\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = \"system\" } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps[\"theme\"]}\n      className=\"toaster group\"\n      icons={{\n        success: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle02Icon\"\n            phosphor=\"CheckCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        info: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            className=\"size-4\"\n          />\n        ),\n        warning: (\n          <IconPlaceholder\n            lucide=\"TriangleAlertIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            className=\"size-4\"\n          />\n        ),\n        error: (\n          <IconPlaceholder\n            lucide=\"OctagonXIcon\"\n            tabler=\"IconAlertOctagon\"\n            hugeicons=\"MultiplicationSignCircleIcon\"\n            phosphor=\"XCircleIcon\"\n            className=\"size-4\"\n          />\n        ),\n        loading: (\n          <IconPlaceholder\n            lucide=\"Loader2Icon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            className=\"size-4 animate-spin\"\n          />\n        ),\n      }}\n      style={\n        {\n          \"--normal-bg\": \"var(--popover)\",\n          \"--normal-text\": \"var(--popover-foreground)\",\n          \"--normal-border\": \"var(--border)\",\n          \"--border-radius\": \"var(--radius)\",\n        } as React.CSSProperties\n      }\n      toastOptions={{\n        classNames: {\n          toast: \"cn-toast\",\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/spinner-example.json b/apps/v4/public/r/styles/radix-vega/spinner-example.json
index a852a7f9bd..d0008add0b 100644
--- a/apps/v4/public/r/styles/radix-vega/spinner-example.json
+++ b/apps/v4/public/r/styles/radix-vega/spinner-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/spinner-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport { Spinner } from \"@/registry/bases/radix/ui/spinner\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SpinnerExample() {\n  return (\n    <ExampleWrapper>\n      <SpinnerBasic />\n      <SpinnerInButtons />\n      <SpinnerInBadges />\n      <SpinnerInInputGroup />\n      <SpinnerInEmpty />\n    </ExampleWrapper>\n  )\n}\n\nfunction SpinnerBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex items-center gap-6\">\n        <Spinner />\n        <Spinner className=\"size-6\" />\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInButtons() {\n  return (\n    <Example title=\"In Buttons\">\n      <div className=\"flex flex-wrap items-center gap-4\">\n        <Button>\n          <Spinner data-icon=\"inline-start\" /> Submit\n        </Button>\n        <Button disabled>\n          <Spinner data-icon=\"inline-start\" /> Disabled\n        </Button>\n        <Button variant=\"outline\" disabled>\n          <Spinner data-icon=\"inline-start\" /> Outline\n        </Button>\n        <Button variant=\"outline\" size=\"icon\" disabled>\n          <Spinner data-icon=\"inline-start\" />\n          <span className=\"sr-only\">Loading...</span>\n        </Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInBadges() {\n  return (\n    <Example title=\"In Badges\" className=\"items-center justify-center\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"destructive\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Badge\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction SpinnerInInputGroup() {\n  return (\n    <Example title=\"In Input Group\">\n      <Field>\n        <FieldLabel htmlFor=\"input-group-spinner\">Input Group</FieldLabel>\n        <InputGroup>\n          <InputGroupInput id=\"input-group-spinner\" />\n          <InputGroupAddon>\n            <Spinner />\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SpinnerInEmpty() {\n  return (\n    <Example title=\"In Empty State\" containerClassName=\"lg:col-span-full\">\n      <Empty className=\"min-h-[300px]\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>No projects yet</EmptyTitle>\n          <EmptyDescription>\n            You haven&apos;t created any projects yet. Get started by creating\n            your first project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button asChild>\n              <a href=\"#\">Create project</a>\n            </Button>\n            <Button variant=\"outline\">Import project</Button>\n          </div>\n          <Button variant=\"link\" asChild className=\"text-muted-foreground\">\n            <a href=\"#\">\n              Learn more{\" \"}\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight02Icon\"\n                phosphor=\"ArrowRightIcon\"\n              />\n            </a>\n          </Button>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/spinner.json b/apps/v4/public/r/styles/radix-vega/spinner.json
index 2f978a536a..a9e0e0c848 100644
--- a/apps/v4/public/r/styles/radix-vega/spinner.json
+++ b/apps/v4/public/r/styles/radix-vega/spinner.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/spinner.tsx",
-      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
+      "content": "import { cn } from \"@/registry/bases/radix/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <IconPlaceholder\n      lucide=\"Loader2Icon\"\n      tabler=\"IconLoader\"\n      hugeicons=\"Loading03Icon\"\n      phosphor=\"SpinnerIcon\"\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Spinner }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/table-example.json b/apps/v4/public/r/styles/radix-vega/table-example.json
index 8fb3bccd94..ce1a9d8302 100644
--- a/apps/v4/public/r/styles/radix-vega/table-example.json
+++ b/apps/v4/public/r/styles/radix-vega/table-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/table-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/bases/radix/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n]\n\nexport default function TableExample() {\n  return (\n    <ExampleWrapper>\n      <TableBasic />\n      <TableWithFooter />\n      <TableSimple />\n      <TableWithBadges />\n      <TableWithActions />\n      <TableWithSelect />\n      <TableWithInput />\n    </ExampleWrapper>\n  )\n}\n\nfunction TableBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithFooter() {\n  return (\n    <Example title=\"With Footer\">\n      <Table>\n        <TableCaption>A list of your recent invoices.</TableCaption>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">Invoice</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead>Method</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.slice(0, 3).map((invoice) => (\n            <TableRow key={invoice.invoice}>\n              <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n              <TableCell>{invoice.paymentStatus}</TableCell>\n              <TableCell>{invoice.paymentMethod}</TableCell>\n              <TableCell className=\"text-right\">\n                {invoice.totalAmount}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell colSpan={3}>Total</TableCell>\n            <TableCell className=\"text-right\">$2,500.00</TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Email</TableHead>\n            <TableHead className=\"text-right\">Role</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Sarah Chen</TableCell>\n            <TableCell>sarah.chen@acme.com</TableCell>\n            <TableCell className=\"text-right\">Admin</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Marc Rodriguez</TableCell>\n            <TableCell>marcus.rodriguez@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Emily Watson</TableCell>\n            <TableCell>emily.watson@acme.com</TableCell>\n            <TableCell className=\"text-right\">User</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithBadges() {\n  return (\n    <Example title=\"With Badges\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Priority</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400\">\n                Completed\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400\">\n                High\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-700 dark:text-yellow-400\">\n                In Progress\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Medium\n              </span>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Pending\n              </span>\n            </TableCell>\n            <TableCell className=\"text-right\">\n              <span className=\"inline-flex items-center rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-400\">\n                Low\n              </span>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithActions() {\n  return (\n    <Example title=\"With Actions\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Price</TableHead>\n            <TableHead className=\"text-right\">Actions</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>$29.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>$129.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>$49.99</TableCell>\n            <TableCell className=\"text-right\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                    />\n                    <span className=\"sr-only\">Open menu</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuItem>Edit</DropdownMenuItem>\n                  <DropdownMenuItem>Duplicate</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem variant=\"destructive\">\n                    Delete\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Task</TableHead>\n            <TableHead>Assignee</TableHead>\n            <TableHead>Status</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Design homepage</TableCell>\n            <TableCell>\n              <Select defaultValue=\"sarah\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>In Progress</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Implement API</TableCell>\n            <TableCell>\n              <Select defaultValue=\"marcus\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Pending</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Write tests</TableCell>\n            <TableCell>\n              <Select defaultValue=\"emily\">\n                <SelectTrigger className=\"w-40\" size=\"sm\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"sarah\">Sarah Chen</SelectItem>\n                    <SelectItem value=\"marcus\">Marc Rodriguez</SelectItem>\n                    <SelectItem value=\"emily\">Emily Watson</SelectItem>\n                    <SelectItem value=\"david\">David Kim</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </TableCell>\n            <TableCell>Not Started</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n\nfunction TableWithInput() {\n  return (\n    <Example title=\"With Input\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Product</TableHead>\n            <TableHead>Quantity</TableHead>\n            <TableHead>Price</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow>\n            <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$29.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"2\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$129.99</TableCell>\n          </TableRow>\n          <TableRow>\n            <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n            <TableCell>\n              <Input\n                type=\"number\"\n                defaultValue=\"1\"\n                className=\"h-8 w-20\"\n                min=\"0\"\n              />\n            </TableCell>\n            <TableCell>$49.99</TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tabs-example.json b/apps/v4/public/r/styles/radix-vega/tabs-example.json
index fdce776953..58c1f47d9b 100644
--- a/apps/v4/public/r/styles/radix-vega/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/bases/radix/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/toggle-example.json b/apps/v4/public/r/styles/radix-vega/toggle-example.json
index d6780fca7d..edfddd4ed4 100644
--- a/apps/v4/public/r/styles/radix-vega/toggle-example.json
+++ b/apps/v4/public/r/styles/radix-vega/toggle-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/toggle-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Toggle } from \"@/registry/bases/radix/ui/toggle\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleBasic />\n      <ToggleOutline />\n      <ToggleSizes />\n      <ToggleWithButtonText />\n      <ToggleWithButtonIcon />\n      <ToggleWithButtonIconText />\n      <ToggleDisabled />\n      <ToggleWithIcon />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleBasic() {\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bold\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n        </Toggle>\n        <Toggle aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n          />\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleOutline() {\n  return (\n    <Example title=\"Outline\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n          />\n          Italic\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n          />\n          Bold\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle variant=\"outline\" aria-label=\"Toggle small\" size=\"sm\">\n          Small\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n          Default\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle large\" size=\"lg\">\n          Large\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonText() {\n  return (\n    <Example title=\"With Button Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm\" size=\"sm\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle default\" size=\"default\">\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg\" size=\"lg\">\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIcon() {\n  return (\n    <Example title=\"With Button Icon\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"icon-lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithButtonIconText() {\n  return (\n    <Example title=\"With Button Icon + Text\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"sm\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              data-icon=\"inline-start\"\n              phosphor=\"TextBIcon\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle sm icon text\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"BoldIcon\"\n              tabler=\"IconBold\"\n              hugeicons=\"TextBoldIcon\"\n              phosphor=\"TextBIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"default\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle\n            variant=\"outline\"\n            aria-label=\"Toggle default icon text\"\n            size=\"default\"\n          >\n            <IconPlaceholder\n              lucide=\"ItalicIcon\"\n              tabler=\"IconItalic\"\n              hugeicons=\"TextItalicIcon\"\n              phosphor=\"TextItalicIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button size=\"lg\" variant=\"outline\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n          <Toggle variant=\"outline\" aria-label=\"Toggle lg icon text\" size=\"lg\">\n            <IconPlaceholder\n              lucide=\"UnderlineIcon\"\n              tabler=\"IconUnderline\"\n              hugeicons=\"TextUnderlineIcon\"\n              phosphor=\"TextUnderlineIcon\"\n            />\n            Toggle\n          </Toggle>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle disabled\" disabled>\n          Disabled\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle disabled outline\" disabled>\n          Disabled\n        </Toggle>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <Toggle aria-label=\"Toggle bookmark\" defaultPressed>\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n        </Toggle>\n        <Toggle variant=\"outline\" aria-label=\"Toggle bookmark outline\">\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            className=\"group-data-[state=on]/toggle:fill-accent-foreground\"\n          />\n          Bookmark\n        </Toggle>\n      </div>\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 1209c6bcd1..1599a87039 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/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\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          />\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          />\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          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\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": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Input } from \"@/registry/bases/radix/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/bases/radix/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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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          />\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",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tooltip-example.json b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
index c2878aaf5e..517d635637 100644
--- a/apps/v4/public/r/styles/radix-vega/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Kbd } from \"@/registry/bases/radix/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/vercel.json b/apps/v4/public/r/styles/radix-vega/vercel.json
index e0975ac2c7..e6c561d07d 100644
--- a/apps/v4/public/r/styles/radix-vega/vercel.json
+++ b/apps/v4/public/r/styles/radix-vega/vercel.json
@@ -23,7 +23,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/bases/radix/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/bases/radix/ui/alert\"\nimport { Badge } from \"@/registry/bases/radix/ui/badge\"\nimport { Button } from \"@/registry/bases/radix/ui/button\"\nimport { Calendar } from \"@/registry/bases/radix/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/bases/radix/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/bases/radix/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/bases/radix/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/bases/radix/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/bases/radix/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/bases/radix/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/bases/radix/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/bases/radix/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/bases/radix/ui/popover\"\nimport { Textarea } from \"@/registry/bases/radix/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/registry/bases/base/blocks/chatgpt.tsx b/apps/v4/registry/bases/base/blocks/chatgpt.tsx
index d1bc86509a..7c7b48ae19 100644
--- a/apps/v4/registry/bases/base/blocks/chatgpt.tsx
+++ b/apps/v4/registry/bases/base/blocks/chatgpt.tsx
@@ -118,6 +118,7 @@ function PromptForm() {
                     lucide="PlusIcon"
                     tabler="IconPlus"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                 </TooltipTrigger>
                 <TooltipContent>
@@ -131,6 +132,7 @@ function PromptForm() {
                       lucide="PaperclipIcon"
                       tabler="IconPaperclip"
                       hugeicons="AttachmentIcon"
+                      phosphor="PaperclipIcon"
                     />
                     Add photos & files
                   </DropdownMenuItem>
@@ -139,6 +141,7 @@ function PromptForm() {
                       lucide="SparklesIcon"
                       tabler="IconSparkles"
                       hugeicons="SparklesIcon"
+                      phosphor="SparkleIcon"
                     />
                     Deep research
                   </DropdownMenuItem>
@@ -147,6 +150,7 @@ function PromptForm() {
                       lucide="ShoppingBagIcon"
                       tabler="IconShoppingBag"
                       hugeicons="ShoppingBag01Icon"
+                      phosphor="BagIcon"
                     />
                     Shopping research
                   </DropdownMenuItem>
@@ -155,6 +159,7 @@ function PromptForm() {
                       lucide="WandIcon"
                       tabler="IconWand"
                       hugeicons="MagicWand05Icon"
+                      phosphor="MagicWandIcon"
                     />
                     Create image
                   </DropdownMenuItem>
@@ -166,6 +171,7 @@ function PromptForm() {
                             lucide="MousePointerIcon"
                             tabler="IconPointer"
                             hugeicons="Cursor01Icon"
+                            phosphor="HandPointingIcon"
                           />
                           Agent mode
                         </DropdownMenuItem>
@@ -185,6 +191,7 @@ function PromptForm() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     More
                   </DropdownMenuSubTrigger>
@@ -196,6 +203,7 @@ function PromptForm() {
                             lucide="ShareIcon"
                             tabler="IconShare"
                             hugeicons="Share03Icon"
+                            phosphor="ShareIcon"
                           />
                           Add sources
                         </DropdownMenuItem>
@@ -204,6 +212,7 @@ function PromptForm() {
                             lucide="BookOpenIcon"
                             tabler="IconBook"
                             hugeicons="BookIcon"
+                            phosphor="BookOpenIcon"
                           />
                           Study and learn
                         </DropdownMenuItem>
@@ -212,6 +221,7 @@ function PromptForm() {
                             lucide="GlobeIcon"
                             tabler="IconWorld"
                             hugeicons="GlobalIcon"
+                            phosphor="GlobeIcon"
                           />
                           Web search
                         </DropdownMenuItem>
@@ -220,6 +230,7 @@ function PromptForm() {
                             lucide="PenToolIcon"
                             tabler="IconPencil"
                             hugeicons="PenIcon"
+                            phosphor="PencilIcon"
                           />
                           Canvas
                         </DropdownMenuItem>
@@ -244,6 +255,7 @@ function PromptForm() {
                   lucide="AudioLinesIcon"
                   tabler="IconMicrophone"
                   hugeicons="AudioWave01Icon"
+                  phosphor="MicrophoneIcon"
                 />
               </TooltipTrigger>
               <TooltipContent>Dictate</TooltipContent>
@@ -257,6 +269,7 @@ function PromptForm() {
                 lucide="ArrowUpIcon"
                 tabler="IconArrowUp"
                 hugeicons="ArrowUp02Icon"
+                phosphor="ArrowUpIcon"
               />
             </InputGroupButton>
           </InputGroupAddon>
@@ -281,6 +294,7 @@ function ModelSelector() {
             lucide="ChevronDownIcon"
             tabler="IconChevronDown"
             hugeicons="ArrowDown01Icon"
+            phosphor="CaretDownIcon"
             className="text-muted-foreground size-4"
           />
         </DropdownMenuTrigger>
@@ -435,6 +449,7 @@ function CreateProjectForm() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="Settings01Icon"
+                  phosphor="GearIcon"
                 />
                 <span className="sr-only">Memory</span>
               </DropdownMenuTrigger>
@@ -509,6 +524,7 @@ function CreateProjectForm() {
                         lucide="FolderIcon"
                         tabler="IconFolder"
                         hugeicons="FolderIcon"
+                        phosphor="FolderIcon"
                         className="text-(--color)"
                       />
                     </PopoverTrigger>
@@ -570,6 +586,7 @@ function CreateProjectForm() {
                       lucide="CircleCheckIcon"
                       tabler="IconCircleCheck"
                       hugeicons="CheckmarkCircle02Icon"
+                      phosphor="CheckCircleIcon"
                       data-icon="inline-start"
                       className="hidden group-data-[checked=true]/badge:inline"
                     />
@@ -584,6 +601,7 @@ function CreateProjectForm() {
                   lucide="LightbulbIcon"
                   tabler="IconBulb"
                   hugeicons="BulbIcon"
+                  phosphor="LightbulbIcon"
                 />
                 <AlertDescription className="text-xs">
                   Projects keep chats, files, and custom instructions in one
diff --git a/apps/v4/registry/bases/base/blocks/github.tsx b/apps/v4/registry/bases/base/blocks/github.tsx
index 97a82d3a9c..d8db184cf6 100644
--- a/apps/v4/registry/bases/base/blocks/github.tsx
+++ b/apps/v4/registry/bases/base/blocks/github.tsx
@@ -164,6 +164,7 @@ function CodespacesCard() {
                         lucide="PlusIcon"
                         tabler="IconPlus"
                         hugeicons="PlusSignIcon"
+                        phosphor="PlusIcon"
                       />
                     </TooltipTrigger>
                     <TooltipContent side="bottom">
@@ -183,6 +184,7 @@ function CodespacesCard() {
                           lucide="MoreHorizontalIcon"
                           tabler="IconDots"
                           hugeicons="MoreHorizontalCircle01Icon"
+                          phosphor="DotsThreeOutlineIcon"
                         />
                       </TooltipTrigger>
                       <TooltipContent side="bottom">
@@ -196,6 +198,7 @@ function CodespacesCard() {
                             lucide="PlusIcon"
                             tabler="IconPlus"
                             hugeicons="PlusSignIcon"
+                            phosphor="PlusIcon"
                           />
                           New with options...
                         </DropdownMenuItem>
@@ -204,6 +207,7 @@ function CodespacesCard() {
                             lucide="ContainerIcon"
                             tabler="IconBox"
                             hugeicons="CubeIcon"
+                            phosphor="CubeIcon"
                           />
                           Configure dev container
                         </DropdownMenuItem>
@@ -212,6 +216,7 @@ function CodespacesCard() {
                             lucide="ZapIcon"
                             tabler="IconBolt"
                             hugeicons="ZapIcon"
+                            phosphor="LightningIcon"
                           />
                           Set up prebuilds
                         </DropdownMenuItem>
@@ -223,6 +228,7 @@ function CodespacesCard() {
                             lucide="ServerIcon"
                             tabler="IconServer"
                             hugeicons="ServerStackIcon"
+                            phosphor="HardDrivesIcon"
                           />
                           Manage codespaces
                         </DropdownMenuItem>
@@ -231,6 +237,7 @@ function CodespacesCard() {
                             lucide="ShareIcon"
                             tabler="IconShare2"
                             hugeicons="Share03Icon"
+                            phosphor="ShareIcon"
                           />
                           Share deep link
                         </DropdownMenuItem>
@@ -239,6 +246,7 @@ function CodespacesCard() {
                             lucide="InfoIcon"
                             tabler="IconInfoCircle"
                             hugeicons="AlertCircleIcon"
+                            phosphor="InfoIcon"
                           />
                           What are codespaces?
                         </DropdownMenuItem>
@@ -255,6 +263,7 @@ function CodespacesCard() {
                       lucide="ServerIcon"
                       tabler="IconServer"
                       hugeicons="ServerStackIcon"
+                      phosphor="HardDrivesIcon"
                     />
                   </EmptyMedia>
                   <EmptyTitle>No codespaces</EmptyTitle>
@@ -303,6 +312,7 @@ function CodespacesCard() {
                       lucide="TerminalIcon"
                       tabler="IconTerminal"
                       hugeicons="ComputerTerminal01Icon"
+                      phosphor="TerminalIcon"
                       className="size-4"
                     />
                     Clone
@@ -317,6 +327,7 @@ function CodespacesCard() {
                         lucide="InfoIcon"
                         tabler="IconInfoCircle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="InfoIcon"
                       />
                     </TooltipTrigger>
                     <TooltipContent side="left">
@@ -347,6 +358,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -373,6 +385,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -399,6 +412,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -427,6 +441,7 @@ function CodespacesCard() {
                     lucide="MonitorIcon"
                     tabler="IconDeviceDesktop"
                     hugeicons="ComputerIcon"
+                    phosphor="MonitorIcon"
                     data-icon="inline-start"
                   />
                   Open with GitHub Desktop
@@ -440,6 +455,7 @@ function CodespacesCard() {
                     lucide="DownloadIcon"
                     tabler="IconDownload"
                     hugeicons="DownloadIcon"
+                    phosphor="DownloadIcon"
                     data-icon="inline-start"
                   />
                   Download ZIP
@@ -466,6 +482,7 @@ function RepositoryToolbar() {
                 lucide="SearchIcon"
                 tabler="IconSearch"
                 hugeicons="SearchIcon"
+                phosphor="MagnifyingGlassIcon"
               />
             </InputGroupButton>
           </InputGroupAddon>
@@ -480,6 +497,7 @@ function RepositoryToolbar() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               data-icon="inline-end"
             />
           </DropdownMenuTrigger>
@@ -490,6 +508,7 @@ function RepositoryToolbar() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
                 Create new file
               </DropdownMenuItem>
@@ -498,6 +517,7 @@ function RepositoryToolbar() {
                   lucide="UploadIcon"
                   hugeicons="Upload01Icon"
                   tabler="IconUpload"
+                  phosphor="UploadIcon"
                 />
                 Upload files
               </DropdownMenuItem>
@@ -517,6 +537,7 @@ function RepositoryToolbar() {
                 lucide="CloudCogIcon"
                 hugeicons="AiCloud01Icon"
                 tabler="IconCloudCog"
+                phosphor="CloudArrowUpIcon"
               />
             </TooltipTrigger>
             <TooltipContent>New Agent Task</TooltipContent>
@@ -545,6 +566,7 @@ function RepositoryToolbar() {
                           lucide="GitBranchIcon"
                           hugeicons="GitBranchIcon"
                           tabler="IconGitBranch"
+                          phosphor="GitBranchIcon"
                         />
                       </PopoverTrigger>
                       <TooltipContent>Select a branch</TooltipContent>
@@ -620,6 +642,7 @@ function RepositoryToolbar() {
                           lucide="BotIcon"
                           hugeicons="RoboticIcon"
                           tabler="IconRobot"
+                          phosphor="RobotIcon"
                         />
                       </PopoverTrigger>
                       <TooltipContent>Select Agent</TooltipContent>
@@ -657,6 +680,7 @@ function RepositoryToolbar() {
                         lucide="SendIcon"
                         hugeicons="SentIcon"
                         tabler="IconSend"
+                        phosphor="PaperPlaneTiltIcon"
                       />
                     </TooltipTrigger>
                     <TooltipContent className="flex items-center gap-2 pr-2">
@@ -684,6 +708,7 @@ function Navbar() {
                 lucide="MenuIcon"
                 hugeicons="Menu09Icon"
                 tabler="IconMenu"
+                phosphor="ListIcon"
               />
               <span className="sr-only">Open menu</span>
             </Button>
@@ -697,6 +722,7 @@ function Navbar() {
                     lucide="XIcon"
                     tabler="IconX"
                     hugeicons="Cancel01Icon"
+                    phosphor="XIcon"
                   />
                   <span className="sr-only">Close</span>
                 </Button>
@@ -710,6 +736,7 @@ function Navbar() {
                       lucide="HomeIcon"
                       tabler="IconHome"
                       hugeicons="HomeIcon"
+                      phosphor="HouseIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -722,6 +749,7 @@ function Navbar() {
                       lucide="CircleIcon"
                       tabler="IconCircle"
                       hugeicons="CircleIcon"
+                      phosphor="CircleIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -734,6 +762,7 @@ function Navbar() {
                       lucide="GitBranchIcon"
                       tabler="IconGitBranch"
                       hugeicons="GitBranchIcon"
+                      phosphor="GitBranchIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -746,6 +775,7 @@ function Navbar() {
                       lucide="LayoutGridIcon"
                       tabler="IconLayoutGrid"
                       hugeicons="GridIcon"
+                      phosphor="GridFourIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -758,6 +788,7 @@ function Navbar() {
                       lucide="MailIcon"
                       tabler="IconMail"
                       hugeicons="MailIcon"
+                      phosphor="EnvelopeIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -770,6 +801,7 @@ function Navbar() {
                       lucide="ServerIcon"
                       tabler="IconServer"
                       hugeicons="ServerStackIcon"
+                      phosphor="HardDrivesIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -782,6 +814,7 @@ function Navbar() {
                       lucide="BotIcon"
                       tabler="IconRobot"
                       hugeicons="RoboticIcon"
+                      phosphor="RobotIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -794,6 +827,7 @@ function Navbar() {
                       lucide="SparklesIcon"
                       tabler="IconSparkles"
                       hugeicons="SparklesIcon"
+                      phosphor="SparkleIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -807,6 +841,7 @@ function Navbar() {
                       lucide="SearchIcon"
                       tabler="IconSearch"
                       hugeicons="SearchIcon"
+                      phosphor="MagnifyingGlassIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -819,6 +854,7 @@ function Navbar() {
                       lucide="ShoppingBagIcon"
                       tabler="IconShoppingBag"
                       hugeicons="ShoppingBasket01Icon"
+                      phosphor="BagIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -831,6 +867,7 @@ function Navbar() {
                       lucide="LinkIcon"
                       tabler="IconLink"
                       hugeicons="LinkIcon"
+                      phosphor="LinkIcon"
                     />
                   </ItemMedia>
                   <ItemContent>
@@ -887,6 +924,7 @@ function Navbar() {
                   lucide="SmileIcon"
                   tabler="IconMoodSmile"
                   hugeicons="SmileIcon"
+                  phosphor="SmileyIcon"
                 />
                 Set status
               </DropdownMenuItem>
@@ -895,6 +933,7 @@ function Navbar() {
                   lucide="CircleAlertIcon"
                   tabler="IconExclamationCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="WarningCircleIcon"
                 />
                 Single sign-on
               </DropdownMenuItem>
@@ -906,6 +945,7 @@ function Navbar() {
                   lucide="UserIcon"
                   tabler="IconUser"
                   hugeicons="UserIcon"
+                  phosphor="UserIcon"
                 />
                 Profile
               </DropdownMenuItem>
@@ -914,6 +954,7 @@ function Navbar() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Repositories
               </DropdownMenuItem>
@@ -922,6 +963,7 @@ function Navbar() {
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                 />
                 Stars
               </DropdownMenuItem>
@@ -930,6 +972,7 @@ function Navbar() {
                   lucide="CodeIcon"
                   tabler="IconCode"
                   hugeicons="CodeIcon"
+                  phosphor="CodeIcon"
                 />
                 Gists
               </DropdownMenuItem>
@@ -938,6 +981,7 @@ function Navbar() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Organizations
               </DropdownMenuItem>
@@ -946,6 +990,7 @@ function Navbar() {
                   lucide="ServerIcon"
                   tabler="IconServer"
                   hugeicons="ServerStackIcon"
+                  phosphor="HardDrivesIcon"
                 />
                 Enterprises
               </DropdownMenuItem>
@@ -954,6 +999,7 @@ function Navbar() {
                   lucide="HeartIcon"
                   tabler="IconHeart"
                   hugeicons="FavouriteIcon"
+                  phosphor="HeartIcon"
                 />
                 Sponsors
               </DropdownMenuItem>
@@ -965,6 +1011,7 @@ function Navbar() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="SettingsIcon"
+                  phosphor="GearIcon"
                 />
                 Settings
               </DropdownMenuItem>
@@ -973,6 +1020,7 @@ function Navbar() {
                   lucide="BotIcon"
                   tabler="IconRobot"
                   hugeicons="RoboticIcon"
+                  phosphor="RobotIcon"
                 />
                 Copilot settings
               </DropdownMenuItem>
@@ -981,6 +1029,7 @@ function Navbar() {
                   lucide="SparklesIcon"
                   tabler="IconSparkles"
                   hugeicons="SparklesIcon"
+                  phosphor="SparkleIcon"
                 />
                 Feature preview
               </DropdownMenuItem>
@@ -989,6 +1038,7 @@ function Navbar() {
                   lucide="MonitorIcon"
                   tabler="IconDeviceDesktop"
                   hugeicons="ComputerIcon"
+                  phosphor="MonitorIcon"
                 />
                 Appearance
               </DropdownMenuItem>
@@ -997,6 +1047,7 @@ function Navbar() {
                   lucide="UserIcon"
                   tabler="IconUser"
                   hugeicons="UserIcon"
+                  phosphor="UserIcon"
                 />
                 Accessibility
               </DropdownMenuItem>
@@ -1005,6 +1056,7 @@ function Navbar() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUpIcon"
+                  phosphor="ArrowUpIcon"
                 />
                 Upgrade
               </DropdownMenuItem>
@@ -1016,6 +1068,7 @@ function Navbar() {
                   lucide="LogOutIcon"
                   tabler="IconLogout"
                   hugeicons="LogoutIcon"
+                  phosphor="SignOutIcon"
                 />
                 Sign out
               </DropdownMenuItem>
@@ -1228,6 +1281,7 @@ function AssignIssue() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               </TooltipTrigger>
               <TooltipContent>Add user</TooltipContent>
diff --git a/apps/v4/registry/bases/base/blocks/preview.tsx b/apps/v4/registry/bases/base/blocks/preview.tsx
index b5acc9d7f9..caddeae3a2 100644
--- a/apps/v4/registry/bases/base/blocks/preview.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview.tsx
@@ -251,6 +251,7 @@ function FieldExamples() {
                   lucide="MinusIcon"
                   tabler="IconMinus"
                   hugeicons="MinusSignIcon"
+                  phosphor="MinusIcon"
                 />
               </Button>
               <Button
@@ -265,6 +266,7 @@ function FieldExamples() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               </Button>
             </ButtonGroup>
@@ -332,6 +334,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowLeftIcon"
                 tabler="IconArrowLeft"
                 hugeicons="ArrowLeft01Icon"
+                phosphor="ArrowLeftIcon"
               />
             </Button>
           </ButtonGroup>
@@ -361,6 +364,7 @@ function ButtonGroupExamples() {
                   lucide="ChevronDownIcon"
                   tabler="IconChevronDown"
                   hugeicons="ArrowDown01Icon"
+                  phosphor="CaretDownIcon"
                 />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-48">
@@ -370,6 +374,7 @@ function ButtonGroupExamples() {
                       lucide="MailCheckIcon"
                       tabler="IconMailCheck"
                       hugeicons="MailValidation01Icon"
+                      phosphor="EnvelopeIcon"
                     />
                     Mark as Read
                   </DropdownMenuItem>
@@ -378,6 +383,7 @@ function ButtonGroupExamples() {
                       lucide="ArchiveIcon"
                       tabler="IconArchive"
                       hugeicons="ArchiveIcon"
+                      phosphor="ArchiveIcon"
                     />
                     Archive
                   </DropdownMenuItem>
@@ -389,6 +395,7 @@ function ButtonGroupExamples() {
                       lucide="ClockIcon"
                       tabler="IconClock"
                       hugeicons="ClockIcon"
+                      phosphor="ClockIcon"
                     />
                     Snooze
                   </DropdownMenuItem>
@@ -397,6 +404,7 @@ function ButtonGroupExamples() {
                       lucide="CalendarPlusIcon"
                       tabler="IconCalendarPlus"
                       hugeicons="CalendarAdd01Icon"
+                      phosphor="CalendarPlusIcon"
                     />
                     Add to Calendar
                   </DropdownMenuItem>
@@ -405,6 +413,7 @@ function ButtonGroupExamples() {
                       lucide="ListFilterIcon"
                       tabler="IconFilterPlus"
                       hugeicons="AddToListIcon"
+                      phosphor="ListPlusIcon"
                     />
                     Add to List
                   </DropdownMenuItem>
@@ -414,6 +423,7 @@ function ButtonGroupExamples() {
                         lucide="TagIcon"
                         tabler="IconTag"
                         hugeicons="TagIcon"
+                        phosphor="TagIcon"
                       />
                       Label As...
                     </DropdownMenuSubTrigger>
@@ -446,6 +456,7 @@ function ButtonGroupExamples() {
                       lucide="Trash2Icon"
                       tabler="IconTrash"
                       hugeicons="Delete02Icon"
+                      phosphor="TrashIcon"
                     />
                     Trash
                   </DropdownMenuItem>
@@ -459,6 +470,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowLeftIcon"
                 tabler="IconArrowLeft"
                 hugeicons="ArrowLeft01Icon"
+                phosphor="ArrowLeftIcon"
               />
             </Button>
             <Button variant="outline" size="icon-sm" aria-label="Next">
@@ -466,6 +478,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowRightIcon"
                 tabler="IconArrowRight"
                 hugeicons="ArrowRight01Icon"
+                phosphor="ArrowRightIcon"
               />
             </Button>
           </ButtonGroup>
@@ -489,6 +502,7 @@ function ButtonGroupExamples() {
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
                     hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
                   />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-52">
@@ -499,6 +513,7 @@ function ButtonGroupExamples() {
                         lucide="VolumeX"
                         tabler="IconVolume"
                         hugeicons="VolumeOffIcon"
+                        phosphor="SpeakerSlashIcon"
                       />
                       Mute Conversation
                     </DropdownMenuItem>
@@ -507,6 +522,7 @@ function ButtonGroupExamples() {
                         lucide="CheckIcon"
                         tabler="IconCheck"
                         hugeicons="Tick02Icon"
+                        phosphor="CheckIcon"
                       />
                       Mark as Read
                     </DropdownMenuItem>
@@ -515,6 +531,7 @@ function ButtonGroupExamples() {
                         lucide="UserRoundXIcon"
                         tabler="IconUserX"
                         hugeicons="UserRemove01Icon"
+                        phosphor="UserMinusIcon"
                       />
                       Block User
                     </DropdownMenuItem>
@@ -527,6 +544,7 @@ function ButtonGroupExamples() {
                         lucide="ShareIcon"
                         tabler="IconShare"
                         hugeicons="Share03Icon"
+                        phosphor="ShareIcon"
                       />
                       Share Conversation
                     </DropdownMenuItem>
@@ -535,6 +553,7 @@ function ButtonGroupExamples() {
                         lucide="CopyIcon"
                         tabler="IconCopy"
                         hugeicons="Copy01Icon"
+                        phosphor="CopyIcon"
                       />
                       Copy Conversation
                     </DropdownMenuItem>
@@ -543,6 +562,7 @@ function ButtonGroupExamples() {
                         lucide="AlertTriangleIcon"
                         tabler="IconAlertTriangle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="WarningIcon"
                       />
                       Report Conversation
                     </DropdownMenuItem>
@@ -554,6 +574,7 @@ function ButtonGroupExamples() {
                         lucide="TrashIcon"
                         tabler="IconTrash"
                         hugeicons="Delete02Icon"
+                        phosphor="TrashIcon"
                       />
                       Delete Conversation
                     </DropdownMenuItem>
@@ -567,6 +588,7 @@ function ButtonGroupExamples() {
                   lucide="BotIcon"
                   tabler="IconRobot"
                   hugeicons="BotIcon"
+                  phosphor="RobotIcon"
                 />{" "}
                 Copilot
               </Button>
@@ -584,6 +606,7 @@ function ButtonGroupExamples() {
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
                     hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
                   />
                 </PopoverTrigger>
                 <PopoverContent align="end" className="w-96">
@@ -624,6 +647,7 @@ function InputGroupExamples() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
@@ -648,6 +672,7 @@ function InputGroupExamples() {
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </TooltipTrigger>
               <TooltipContent>This is content in a tooltip.</TooltipContent>
@@ -675,6 +700,7 @@ function InputGroupExamples() {
                     lucide="InfoIcon"
                     tabler="IconInfoCircle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="InfoIcon"
                   />
                 </PopoverTrigger>
                 <PopoverContent
@@ -702,6 +728,7 @@ function InputGroupExamples() {
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                   data-favorite={isFavorite}
                   className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
                 />
@@ -716,6 +743,7 @@ function InputGroupExamples() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </Button>
           </ButtonGroup>
@@ -747,6 +775,7 @@ function InputGroupExamples() {
                       lucide="AudioLinesIcon"
                       tabler="IconWaveSine"
                       hugeicons="AudioWave01Icon"
+                      phosphor="MicrophoneIcon"
                     />
                   </TooltipTrigger>
                   <TooltipContent>Voice Mode</TooltipContent>
@@ -768,6 +797,7 @@ function InputGroupExamples() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </InputGroupButton>
             <DropdownMenu>
@@ -799,6 +829,7 @@ function InputGroupExamples() {
                 lucide="ArrowUpIcon"
                 tabler="IconArrowUp"
                 hugeicons="ArrowUp01Icon"
+                phosphor="ArrowUpIcon"
               />
               <span className="sr-only">Send</span>
             </InputGroupButton>
@@ -875,6 +906,7 @@ function EmptyAvatarGroup() {
                       lucide="BluetoothIcon"
                       tabler="IconBluetooth"
                       hugeicons="BluetoothIcon"
+                      phosphor="BluetoothIcon"
                     />
                   </AlertDialogMedia>
                   <AlertDialogTitle>
@@ -1097,6 +1129,7 @@ function SmallFormExample() {
                   lucide="MoreVerticalIcon"
                   tabler="IconDotsVertical"
                   hugeicons="MoreVerticalCircle01Icon"
+                  phosphor="DotsThreeVerticalIcon"
                 />
                 <span className="sr-only">More options</span>
               </DropdownMenuTrigger>
@@ -1111,6 +1144,7 @@ function SmallFormExample() {
                       lucide="FileIcon"
                       tabler="IconFile"
                       hugeicons="FileIcon"
+                      phosphor="FileIcon"
                     />
                     New File
                     <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -1120,6 +1154,7 @@ function SmallFormExample() {
                       lucide="FolderIcon"
                       tabler="IconFolder"
                       hugeicons="FolderIcon"
+                      phosphor="FolderIcon"
                     />
                     New Folder
                     <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -1130,6 +1165,7 @@ function SmallFormExample() {
                         lucide="FolderOpenIcon"
                         tabler="IconFolderOpen"
                         hugeicons="FolderOpenIcon"
+                        phosphor="FolderOpenIcon"
                       />
                       Open Recent
                     </DropdownMenuSubTrigger>
@@ -1142,6 +1178,7 @@ function SmallFormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Alpha
                           </DropdownMenuItem>
@@ -1150,6 +1187,7 @@ function SmallFormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Beta
                           </DropdownMenuItem>
@@ -1159,6 +1197,7 @@ function SmallFormExample() {
                                 lucide="MoreHorizontalIcon"
                                 tabler="IconDots"
                                 hugeicons="MoreHorizontalCircle01Icon"
+                                phosphor="DotsThreeOutlineIcon"
                               />
                               More Projects
                             </DropdownMenuSubTrigger>
@@ -1169,6 +1208,7 @@ function SmallFormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Gamma
                                 </DropdownMenuItem>
@@ -1177,6 +1217,7 @@ function SmallFormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Delta
                                 </DropdownMenuItem>
@@ -1191,6 +1232,7 @@ function SmallFormExample() {
                               lucide="FolderSearchIcon"
                               tabler="IconFolderSearch"
                               hugeicons="SearchIcon"
+                              phosphor="MagnifyingGlassIcon"
                             />
                             Browse...
                           </DropdownMenuItem>
@@ -1204,6 +1246,7 @@ function SmallFormExample() {
                       lucide="SaveIcon"
                       tabler="IconDeviceFloppy"
                       hugeicons="FloppyDiskIcon"
+                      phosphor="FloppyDiskIcon"
                     />
                     Save
                     <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -1213,6 +1256,7 @@ function SmallFormExample() {
                       lucide="DownloadIcon"
                       tabler="IconDownload"
                       hugeicons="DownloadIcon"
+                      phosphor="DownloadIcon"
                     />
                     Export
                     <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -1234,6 +1278,7 @@ function SmallFormExample() {
                       lucide="EyeIcon"
                       tabler="IconEye"
                       hugeicons="EyeIcon"
+                      phosphor="EyeIcon"
                     />
                     Show Sidebar
                   </DropdownMenuCheckboxItem>
@@ -1250,6 +1295,7 @@ function SmallFormExample() {
                       lucide="LayoutIcon"
                       tabler="IconLayout"
                       hugeicons="LayoutIcon"
+                      phosphor="LayoutIcon"
                     />
                     Show Status Bar
                   </DropdownMenuCheckboxItem>
@@ -1259,6 +1305,7 @@ function SmallFormExample() {
                         lucide="PaletteIcon"
                         tabler="IconPalette"
                         hugeicons="PaintBoardIcon"
+                        phosphor="PaletteIcon"
                       />
                       Theme
                     </DropdownMenuSubTrigger>
@@ -1275,6 +1322,7 @@ function SmallFormExample() {
                                 lucide="SunIcon"
                                 tabler="IconSun"
                                 hugeicons="SunIcon"
+                                phosphor="SunIcon"
                               />
                               Light
                             </DropdownMenuRadioItem>
@@ -1283,6 +1331,7 @@ function SmallFormExample() {
                                 lucide="MoonIcon"
                                 tabler="IconMoon"
                                 hugeicons="MoonIcon"
+                                phosphor="MoonIcon"
                               />
                               Dark
                             </DropdownMenuRadioItem>
@@ -1291,6 +1340,7 @@ function SmallFormExample() {
                                 lucide="MonitorIcon"
                                 tabler="IconDeviceDesktop"
                                 hugeicons="ComputerIcon"
+                                phosphor="MonitorIcon"
                               />
                               System
                             </DropdownMenuRadioItem>
@@ -1307,6 +1357,7 @@ function SmallFormExample() {
                       lucide="HelpCircleIcon"
                       tabler="IconHelpCircle"
                       hugeicons="HelpCircleIcon"
+                      phosphor="QuestionIcon"
                     />
                     Help & Support
                   </DropdownMenuItem>
@@ -1315,6 +1366,7 @@ function SmallFormExample() {
                       lucide="FileTextIcon"
                       tabler="IconFileText"
                       hugeicons="File01Icon"
+                      phosphor="FileTextIcon"
                     />
                     Documentation
                   </DropdownMenuItem>
@@ -1326,6 +1378,7 @@ function SmallFormExample() {
                       lucide="LogOutIcon"
                       tabler="IconLogout"
                       hugeicons="LogoutIcon"
+                      phosphor="SignOutIcon"
                     />
                     Sign Out
                     <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
@@ -1434,6 +1487,7 @@ function ObservabilityCard() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-end"
             />
           </Button>
@@ -1469,6 +1523,7 @@ function ItemExample() {
               lucide="ShoppingBagIcon"
               tabler="IconShoppingBag"
               hugeicons="ShoppingBasket01Icon"
+              phosphor="BagIcon"
             />
           </ItemMedia>
           <ItemContent>
diff --git a/apps/v4/registry/bases/base/blocks/vercel.tsx b/apps/v4/registry/bases/base/blocks/vercel.tsx
index 6afaad7709..c6995c86c4 100644
--- a/apps/v4/registry/bases/base/blocks/vercel.tsx
+++ b/apps/v4/registry/bases/base/blocks/vercel.tsx
@@ -264,6 +264,7 @@ function DeploymentFilter() {
               lucide="CalendarIcon"
               tabler="IconCalendar"
               hugeicons="Calendar01Icon"
+              phosphor="CalendarIcon"
               data-icon="inline-start"
               className="text-muted-foreground"
             />
@@ -296,6 +297,7 @@ function DeploymentFilter() {
               lucide="Search"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupInput placeholder="All Authors..." />
@@ -304,6 +306,7 @@ function DeploymentFilter() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               className="text-muted-foreground"
             />
           </InputGroupAddon>
@@ -317,6 +320,7 @@ function DeploymentFilter() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               data-icon="inline-end"
               className="text-muted-foreground"
             />
@@ -333,6 +337,7 @@ function DeploymentFilter() {
                   lucide="CheckIcon"
                   tabler="IconCheck"
                   hugeicons="Tick02Icon"
+                  phosphor="CheckIcon"
                   className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
                 />
               </DropdownMenuItem>
@@ -362,6 +367,7 @@ function DeploymentFilter() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               data-icon="inline-end"
               className="text-muted-foreground ml-auto"
             />
@@ -388,6 +394,7 @@ function DeploymentFilter() {
                     lucide="CheckIcon"
                     tabler="IconCheck"
                     hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
                     className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
                   />
                 </DropdownMenuItem>
@@ -464,6 +471,7 @@ function BillingList() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     <span className="sr-only">More options</span>
                   </DropdownMenuTrigger>
@@ -605,6 +613,7 @@ function ActivateAgentDialog() {
                       lucide="CheckCircle2Icon"
                       tabler="IconCircleCheckFilled"
                       hugeicons="CheckmarkCircle02Icon"
+                      phosphor="CheckCircleIcon"
                       className="fill-primary text-primary-foreground size-5"
                     />
                   </ItemMedia>
@@ -621,6 +630,7 @@ function ActivateAgentDialog() {
                 lucide="CircleDollarSignIcon"
                 hugeicons="DollarCircleIcon"
                 tabler="IconCoin"
+                phosphor="CurrencyCircleDollarIcon"
               />
               <AlertDescription>
                 Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
@@ -665,6 +675,7 @@ function ObservabilityCard() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-end"
             />
           </Button>
diff --git a/apps/v4/registry/bases/base/examples/accordion-example.tsx b/apps/v4/registry/bases/base/examples/accordion-example.tsx
index a12a88306b..a90af95037 100644
--- a/apps/v4/registry/bases/base/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/base/examples/accordion-example.tsx
@@ -175,6 +175,7 @@ function AccordionInCard() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
             />
           </Button>
         </>
diff --git a/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx b/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx
index dad5ade15d..c66b96e8f0 100644
--- a/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx
+++ b/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx
@@ -100,6 +100,7 @@ function AlertDialogWithMedia() {
                 lucide="BluetoothIcon"
                 tabler="IconBluetooth"
                 hugeicons="BluetoothIcon"
+                phosphor="BluetoothIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -133,6 +134,7 @@ function AlertDialogSmallWithMedia() {
                 lucide="BluetoothIcon"
                 tabler="IconBluetooth"
                 hugeicons="BluetoothIcon"
+                phosphor="BluetoothIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
@@ -164,6 +166,7 @@ function AlertDialogDestructive() {
                 lucide="Trash2Icon"
                 tabler="IconTrash"
                 hugeicons="Delete02Icon"
+                phosphor="TrashIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Delete chat?</AlertDialogTitle>
diff --git a/apps/v4/registry/bases/base/examples/alert-example.tsx b/apps/v4/registry/bases/base/examples/alert-example.tsx
index 58733381a2..3ab82a1a59 100644
--- a/apps/v4/registry/bases/base/examples/alert-example.tsx
+++ b/apps/v4/registry/bases/base/examples/alert-example.tsx
@@ -55,6 +55,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             Let&apos;s try one with icon, title and a <a href="#">link</a>.
@@ -65,6 +66,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertDescription>
             This one has an icon and a description only. No title.{" "}
@@ -77,6 +79,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Success! Your changes have been saved</AlertTitle>
           <AlertDescription>
@@ -88,6 +91,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             This is a very long alert title that demonstrates how the component
@@ -100,6 +104,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertDescription>
             This is a very long alert description that demonstrates how the
@@ -112,6 +117,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             This is an extremely long alert title that spans multiple lines to
@@ -141,6 +147,7 @@ function AlertExample3() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Something went wrong!</AlertTitle>
           <AlertDescription>
@@ -152,6 +159,7 @@ function AlertExample3() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Unable to process your payment.</AlertTitle>
           <AlertDescription>
@@ -180,6 +188,7 @@ function AlertExample4() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
           <AlertAction>
@@ -191,6 +200,7 @@ function AlertExample4() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
           <AlertDescription>
diff --git a/apps/v4/registry/bases/base/examples/avatar-example.tsx b/apps/v4/registry/bases/base/examples/avatar-example.tsx
index 141044b8d9..f854f173fd 100644
--- a/apps/v4/registry/bases/base/examples/avatar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/avatar-example.tsx
@@ -129,6 +129,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -143,6 +144,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -157,6 +159,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -169,6 +172,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -179,6 +183,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -189,6 +194,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -361,6 +367,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -388,6 +395,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -421,6 +429,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -464,6 +473,7 @@ function AvatarInEmpty() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               </AvatarGroupCount>
             </AvatarGroup>
@@ -479,6 +489,7 @@ function AvatarInEmpty() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
             Invite Members
           </Button>
diff --git a/apps/v4/registry/bases/base/examples/badge-example.tsx b/apps/v4/registry/bases/base/examples/badge-example.tsx
index ce822f0c7b..7dfc9a00c5 100644
--- a/apps/v4/registry/bases/base/examples/badge-example.tsx
+++ b/apps/v4/registry/bases/base/examples/badge-example.tsx
@@ -44,6 +44,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Default
@@ -53,6 +54,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Secondary
@@ -62,6 +64,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Destructive
@@ -71,6 +74,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Outline
@@ -80,6 +84,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Ghost
@@ -89,6 +94,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Link
@@ -108,6 +114,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -117,6 +124,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -126,6 +134,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -135,6 +144,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -144,6 +154,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -153,6 +164,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -206,6 +218,7 @@ function BadgeAsLink() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRightIcon"
+                phosphor="ArrowUpRightIcon"
                 data-icon="inline-end"
               />
             </a>
@@ -220,6 +233,7 @@ function BadgeAsLink() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRightIcon"
+                phosphor="ArrowUpRightIcon"
                 data-icon="inline-end"
               />
             </a>
@@ -234,6 +248,7 @@ function BadgeAsLink() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRightIcon"
+                phosphor="ArrowUpRightIcon"
                 data-icon="inline-end"
               />
             </a>
@@ -248,6 +263,7 @@ function BadgeAsLink() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowRight02Icon"
+                phosphor="ArrowUpRightIcon"
                 data-icon="inline-end"
               />
             </a>
diff --git a/apps/v4/registry/bases/base/examples/button-example.tsx b/apps/v4/registry/bases/base/examples/button-example.tsx
index ade125c37c..348ed390f0 100644
--- a/apps/v4/registry/bases/base/examples/button-example.tsx
+++ b/apps/v4/registry/bases/base/examples/button-example.tsx
@@ -97,6 +97,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -106,6 +107,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -115,6 +117,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -124,6 +127,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -133,6 +137,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -142,6 +147,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -153,6 +159,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -162,6 +169,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -171,6 +179,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="sm" variant="ghost">
@@ -179,6 +188,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -188,6 +198,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -197,6 +208,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -208,6 +220,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -217,6 +230,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -226,6 +240,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -235,6 +250,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -244,6 +260,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -253,6 +270,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -264,6 +282,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -273,6 +292,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -282,6 +302,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -291,6 +312,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -300,6 +322,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -309,6 +332,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -326,6 +350,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -335,6 +360,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -344,6 +370,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -353,6 +380,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -362,6 +390,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -371,6 +400,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -382,6 +412,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -391,6 +422,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -400,6 +432,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -409,6 +442,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -418,6 +452,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -427,6 +462,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -438,6 +474,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -447,6 +484,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -456,6 +494,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -465,6 +504,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -474,6 +514,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -483,6 +524,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -494,6 +536,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -503,6 +546,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -512,6 +556,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -521,6 +566,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -530,6 +576,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -539,6 +586,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -557,6 +605,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="secondary">
@@ -564,6 +613,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="outline">
@@ -571,6 +621,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="ghost">
@@ -578,6 +629,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="destructive">
@@ -585,6 +637,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="link">
@@ -592,6 +645,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -601,6 +655,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="secondary">
@@ -608,6 +663,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="outline">
@@ -615,6 +671,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="ghost">
@@ -622,6 +679,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="destructive">
@@ -629,6 +687,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="link">
@@ -636,6 +695,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -645,6 +705,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="secondary">
@@ -652,6 +713,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="outline">
@@ -659,6 +721,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="ghost">
@@ -666,6 +729,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="destructive">
@@ -673,6 +737,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="link">
@@ -680,6 +745,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -689,6 +755,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="secondary">
@@ -696,6 +763,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="outline">
@@ -703,6 +771,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="ghost">
@@ -710,6 +779,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="destructive">
@@ -717,6 +787,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="link">
@@ -724,6 +795,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -743,6 +815,7 @@ function ButtonExamples() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
               data-icon="inline-end"
             />
           </Button>
@@ -754,6 +827,7 @@ function ButtonExamples() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
               data-icon="inline-end"
             />
           </Button>
diff --git a/apps/v4/registry/bases/base/examples/button-group-example.tsx b/apps/v4/registry/bases/base/examples/button-group-example.tsx
index d880c35612..9ac803f8a2 100644
--- a/apps/v4/registry/bases/base/examples/button-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/button-group-example.tsx
@@ -127,6 +127,7 @@ function ButtonGroupWithDropdown() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDown01Icon"
+                phosphor="CaretDownIcon"
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
@@ -147,6 +148,7 @@ function ButtonGroupWithDropdown() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDown01Icon"
+                phosphor="CaretDownIcon"
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-50">
@@ -156,6 +158,7 @@ function ButtonGroupWithDropdown() {
                     lucide="VolumeX"
                     tabler="IconVolume"
                     hugeicons="VolumeOffIcon"
+                    phosphor="SpeakerSlashIcon"
                   />
                   Mute Conversation
                 </DropdownMenuItem>
@@ -164,6 +167,7 @@ function ButtonGroupWithDropdown() {
                     lucide="CheckIcon"
                     tabler="IconCheck"
                     hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
                   />
                   Mark as Read
                 </DropdownMenuItem>
@@ -172,6 +176,7 @@ function ButtonGroupWithDropdown() {
                     lucide="AlertTriangleIcon"
                     tabler="IconAlertTriangle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="WarningIcon"
                   />
                   Report Conversation
                 </DropdownMenuItem>
@@ -180,6 +185,7 @@ function ButtonGroupWithDropdown() {
                     lucide="UserRoundXIcon"
                     tabler="IconUserX"
                     hugeicons="UserRemove01Icon"
+                    phosphor="UserMinusIcon"
                   />
                   Block User
                 </DropdownMenuItem>
@@ -188,6 +194,7 @@ function ButtonGroupWithDropdown() {
                     lucide="ShareIcon"
                     tabler="IconShare"
                     hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
                   />
                   Share Conversation
                 </DropdownMenuItem>
@@ -196,6 +203,7 @@ function ButtonGroupWithDropdown() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
                   />
                   Copy Conversation
                 </DropdownMenuItem>
@@ -207,6 +215,7 @@ function ButtonGroupWithDropdown() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
                   />
                   Delete Conversation
                 </DropdownMenuItem>
@@ -251,6 +260,7 @@ function ButtonGroupWithSelect() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -269,6 +279,7 @@ function ButtonGroupWithIcons() {
               lucide="FlipHorizontalIcon"
               tabler="IconFlipHorizontal"
               hugeicons="FlipHorizontalIcon"
+              phosphor="ArrowsHorizontalIcon"
             />
           </Button>
           <Button variant="outline">
@@ -276,6 +287,7 @@ function ButtonGroupWithIcons() {
               lucide="FlipVerticalIcon"
               tabler="IconFlipVertical"
               hugeicons="FlipVerticalIcon"
+              phosphor="ArrowsVerticalIcon"
             />
           </Button>
           <Button variant="outline">
@@ -283,6 +295,7 @@ function ButtonGroupWithIcons() {
               lucide="RotateCwIcon"
               tabler="IconRotateClockwise2"
               hugeicons="Rotate01Icon"
+              phosphor="ArrowClockwiseIcon"
             />
           </Button>
         </ButtonGroup>
@@ -305,6 +318,7 @@ function ButtonGroupWithInputGroup() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
         </InputGroup>
@@ -337,6 +351,7 @@ function ButtonGroupWithFields() {
                 lucide="MinusIcon"
                 tabler="IconMinus"
                 hugeicons="MinusSignIcon"
+                phosphor="MinusIcon"
               />
             </Button>
             <Button variant="outline" size="icon">
@@ -344,6 +359,7 @@ function ButtonGroupWithFields() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </Button>
           </ButtonGroup>
@@ -362,6 +378,7 @@ function ButtonGroupWithLike() {
             lucide="HeartIcon"
             tabler="IconBell"
             hugeicons="Notification02Icon"
+            phosphor="HeartIcon"
             data-icon="inline-start"
           />{" "}
           Like
@@ -420,6 +437,7 @@ function ButtonGroupNested() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </Button>
         </ButtonGroup>
@@ -432,6 +450,7 @@ function ButtonGroupNested() {
                   lucide="AudioLinesIcon"
                   tabler="IconHeadphones"
                   hugeicons="AudioWave01Icon"
+                  phosphor="MicrophoneIcon"
                 />
               </TooltipTrigger>
               <TooltipContent>Voice Mode</TooltipContent>
@@ -452,6 +471,7 @@ function ButtonGroupPagination() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft02Icon"
+            phosphor="ArrowLeftIcon"
             data-icon="inline-start"
           />
           Previous
@@ -477,6 +497,7 @@ function ButtonGroupPagination() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -512,6 +533,7 @@ function ButtonGroupPaginationSplit() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
           <Button variant="outline" size="icon-xs">
@@ -519,6 +541,7 @@ function ButtonGroupPaginationSplit() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -537,6 +560,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
           <Button variant="outline">
@@ -544,6 +568,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -553,6 +578,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
         </ButtonGroup>
@@ -599,6 +625,7 @@ function ButtonGroupVertical() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -606,6 +633,7 @@ function ButtonGroupVertical() {
               lucide="MinusIcon"
               tabler="IconMinus"
               hugeicons="MinusSignIcon"
+              phosphor="MinusIcon"
             />
           </Button>
         </ButtonGroup>
@@ -624,6 +652,7 @@ function ButtonGroupVerticalNested() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -631,6 +660,7 @@ function ButtonGroupVerticalNested() {
               lucide="CopyIcon"
               tabler="IconCopy"
               hugeicons="Copy01Icon"
+              phosphor="CopyIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -638,6 +668,7 @@ function ButtonGroupVerticalNested() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="Share03Icon"
+              phosphor="ShareIcon"
             />
           </Button>
         </ButtonGroup>
@@ -647,6 +678,7 @@ function ButtonGroupVerticalNested() {
               lucide="FlipHorizontalIcon"
               tabler="IconFlipHorizontal"
               hugeicons="FlipHorizontalIcon"
+              phosphor="ArrowsHorizontalIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -654,6 +686,7 @@ function ButtonGroupVerticalNested() {
               lucide="FlipVerticalIcon"
               tabler="IconFlipVertical"
               hugeicons="FlipVerticalIcon"
+              phosphor="ArrowsVerticalIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -661,6 +694,7 @@ function ButtonGroupVerticalNested() {
               lucide="RotateCwIcon"
               tabler="IconRotateClockwise2"
               hugeicons="Rotate01Icon"
+              phosphor="ArrowClockwiseIcon"
             />
           </Button>
         </ButtonGroup>
@@ -670,6 +704,7 @@ function ButtonGroupVerticalNested() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="Delete02Icon"
+              phosphor="TrashIcon"
             />
           </Button>
         </ButtonGroup>
diff --git a/apps/v4/registry/bases/base/examples/calendar-example.tsx b/apps/v4/registry/bases/base/examples/calendar-example.tsx
index c9e6ac0110..af1d746298 100644
--- a/apps/v4/registry/bases/base/examples/calendar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/calendar-example.tsx
@@ -200,6 +200,7 @@ function CalendarWithTime() {
                     lucide="Clock2Icon"
                     tabler="IconClockHour2"
                     hugeicons="Clock03Icon"
+                    phosphor="ClockIcon"
                     className="text-muted-foreground"
                   />
                 </InputGroupAddon>
@@ -220,6 +221,7 @@ function CalendarWithTime() {
                     lucide="Clock2Icon"
                     tabler="IconClockHour2"
                     hugeicons="Clock03Icon"
+                    phosphor="ClockIcon"
                     className="text-muted-foreground"
                   />
                 </InputGroupAddon>
@@ -350,6 +352,7 @@ function DatePickerSimple() {
               lucide="CalendarIcon"
               tabler="IconCalendar"
               hugeicons="CalendarIcon"
+              phosphor="CalendarBlankIcon"
               data-icon="inline-start"
             />
             {date ? format(date, "PPP") : <span>Pick a date</span>}
@@ -387,6 +390,7 @@ function DatePickerWithRange() {
               lucide="CalendarIcon"
               tabler="IconCalendar"
               hugeicons="CalendarIcon"
+              phosphor="CalendarBlankIcon"
               data-icon="inline-start"
             />
             {date?.from ? (
@@ -441,6 +445,7 @@ function DataPickerWithDropdowns() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDownIcon"
+              phosphor="CaretDownIcon"
               data-icon="inline-start"
               className="ml-auto"
             />
diff --git a/apps/v4/registry/bases/base/examples/card-example.tsx b/apps/v4/registry/bases/base/examples/card-example.tsx
index 7a53d00388..220eb87d70 100644
--- a/apps/v4/registry/bases/base/examples/card-example.tsx
+++ b/apps/v4/registry/bases/base/examples/card-example.tsx
@@ -113,6 +113,7 @@ function CardMeetingNotes() {
                 lucide="CaptionsIcon"
                 tabler="IconTextCaption"
                 hugeicons="TextCheckIcon"
+                phosphor="TextTIcon"
                 data-icon="inline-start"
               />
               Transcribe
@@ -183,6 +184,7 @@ function CardWithImage() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="Add01Icon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             Button
@@ -216,6 +218,7 @@ function CardWithImageSmall() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="Add01Icon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             Button
diff --git a/apps/v4/registry/bases/base/examples/chart-example.tsx b/apps/v4/registry/bases/base/examples/chart-example.tsx
index 96e343dcdb..b6a077a2be 100644
--- a/apps/v4/registry/bases/base/examples/chart-example.tsx
+++ b/apps/v4/registry/bases/base/examples/chart-example.tsx
@@ -121,6 +121,7 @@ function ChartAreaExample() {
                   lucide="TrendingUpIcon"
                   tabler="IconTrendingUp"
                   hugeicons="ChartUpIcon"
+                  phosphor="TrendUpIcon"
                   className="size-4"
                 />
               </div>
@@ -190,6 +191,7 @@ function ChartBarExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -275,6 +277,7 @@ function ChartLineExample() {
                   lucide="TrendingUpIcon"
                   tabler="IconTrendingUp"
                   hugeicons="ChartUpIcon"
+                  phosphor="TrendUpIcon"
                   className="size-4"
                 />
               </div>
@@ -392,6 +395,7 @@ function ChartPieExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -462,6 +466,7 @@ function ChartRadarExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -556,6 +561,7 @@ function ChartRadialExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
diff --git a/apps/v4/registry/bases/base/examples/collapsible-example.tsx b/apps/v4/registry/bases/base/examples/collapsible-example.tsx
index 71493ed94c..813926b1fe 100644
--- a/apps/v4/registry/bases/base/examples/collapsible-example.tsx
+++ b/apps/v4/registry/bases/base/examples/collapsible-example.tsx
@@ -105,12 +105,14 @@ function CollapsibleFileTree() {
               lucide="ChevronRightIcon"
               tabler="IconChevronRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="CaretRightIcon"
               className="transition-transform group-data-[state=open]:rotate-90"
             />
             <IconPlaceholder
               lucide="FolderIcon"
               tabler="IconFolder"
               hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
             />
             {fileItem.name}
           </CollapsibleTrigger>
@@ -133,6 +135,7 @@ function CollapsibleFileTree() {
           lucide="FileIcon"
           tabler="IconFile"
           hugeicons="File01Icon"
+          phosphor="FileIcon"
         />
         <span>{fileItem.name}</span>
       </Button>
@@ -214,12 +217,14 @@ function CollapsibleSettings() {
                   lucide="MinimizeIcon"
                   tabler="IconMinimize"
                   hugeicons="MinusSignIcon"
+                  phosphor="MinusIcon"
                 />
               ) : (
                 <IconPlaceholder
                   lucide="MaximizeIcon"
                   tabler="IconMaximize"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               )}
             </CollapsibleTrigger>
diff --git a/apps/v4/registry/bases/base/examples/combobox-example.tsx b/apps/v4/registry/bases/base/examples/combobox-example.tsx
index 2f5801c917..64f699d759 100644
--- a/apps/v4/registry/bases/base/examples/combobox-example.tsx
+++ b/apps/v4/registry/bases/base/examples/combobox-example.tsx
@@ -810,6 +810,7 @@ function ComboxboxInputAddon() {
               lucide="GlobeIcon"
               tabler="IconGlobe"
               hugeicons="Globe02Icon"
+              phosphor="GlobeIcon"
             />
           </InputGroupAddon>
         </ComboboxInput>
@@ -1233,6 +1234,7 @@ function ComboboxWithOtherInputs() {
           lucide="ChevronDownIcon"
           tabler="IconSelector"
           hugeicons="UnfoldMoreIcon"
+          phosphor="CaretDownIcon"
         />
       </Button>
       <Input placeholder="Select a framework" className="w-52" />
@@ -1243,6 +1245,7 @@ function ComboboxWithOtherInputs() {
             lucide="ChevronDownIcon"
             tabler="IconSelector"
             hugeicons="UnfoldMoreIcon"
+            phosphor="CaretDownIcon"
           />
         </InputGroupAddon>
       </InputGroup>
diff --git a/apps/v4/registry/bases/base/examples/command-example.tsx b/apps/v4/registry/bases/base/examples/command-example.tsx
index 2d5af01c7a..f384abbfff 100644
--- a/apps/v4/registry/bases/base/examples/command-example.tsx
+++ b/apps/v4/registry/bases/base/examples/command-example.tsx
@@ -86,6 +86,7 @@ function CommandWithShortcuts() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -95,6 +96,7 @@ function CommandWithShortcuts() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -104,6 +106,7 @@ function CommandWithShortcuts() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -141,6 +144,7 @@ function CommandWithGroups() {
                     lucide="CalendarIcon"
                     tabler="IconCalendar"
                     hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
                   />
                   <span>Calendar</span>
                 </CommandItem>
@@ -149,6 +153,7 @@ function CommandWithGroups() {
                     lucide="SmileIcon"
                     tabler="IconMoodSmile"
                     hugeicons="SmileIcon"
+                    phosphor="SmileyIcon"
                   />
                   <span>Search Emoji</span>
                 </CommandItem>
@@ -157,6 +162,7 @@ function CommandWithGroups() {
                     lucide="CalculatorIcon"
                     tabler="IconCalculator"
                     hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
                   />
                   <span>Calculator</span>
                 </CommandItem>
@@ -168,6 +174,7 @@ function CommandWithGroups() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -177,6 +184,7 @@ function CommandWithGroups() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -186,6 +194,7 @@ function CommandWithGroups() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -223,6 +232,7 @@ function CommandManyItems() {
                     lucide="HomeIcon"
                     tabler="IconHome"
                     hugeicons="HomeIcon"
+                    phosphor="HouseIcon"
                   />
                   <span>Home</span>
                   <CommandShortcut>⌘H</CommandShortcut>
@@ -232,6 +242,7 @@ function CommandManyItems() {
                     lucide="InboxIcon"
                     tabler="IconInbox"
                     hugeicons="InboxIcon"
+                    phosphor="TrayIcon"
                   />
                   <span>Inbox</span>
                   <CommandShortcut>⌘I</CommandShortcut>
@@ -241,6 +252,7 @@ function CommandManyItems() {
                     lucide="FileTextIcon"
                     tabler="IconFileText"
                     hugeicons="File02Icon"
+                    phosphor="FileTextIcon"
                   />
                   <span>Documents</span>
                   <CommandShortcut>⌘D</CommandShortcut>
@@ -250,6 +262,7 @@ function CommandManyItems() {
                     lucide="FolderIcon"
                     tabler="IconFolder"
                     hugeicons="FolderIcon"
+                    phosphor="FolderIcon"
                   />
                   <span>Folders</span>
                   <CommandShortcut>⌘F</CommandShortcut>
@@ -262,6 +275,7 @@ function CommandManyItems() {
                     lucide="PlusIcon"
                     tabler="IconPlus"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                   <span>New File</span>
                   <CommandShortcut>⌘N</CommandShortcut>
@@ -271,6 +285,7 @@ function CommandManyItems() {
                     lucide="FolderPlusIcon"
                     tabler="IconFolderPlus"
                     hugeicons="FolderAddIcon"
+                    phosphor="FolderPlusIcon"
                   />
                   <span>New Folder</span>
                   <CommandShortcut>⇧⌘N</CommandShortcut>
@@ -280,6 +295,7 @@ function CommandManyItems() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   <span>Copy</span>
                   <CommandShortcut>⌘C</CommandShortcut>
@@ -289,6 +305,7 @@ function CommandManyItems() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   <span>Cut</span>
                   <CommandShortcut>⌘X</CommandShortcut>
@@ -298,6 +315,7 @@ function CommandManyItems() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   <span>Paste</span>
                   <CommandShortcut>⌘V</CommandShortcut>
@@ -307,6 +325,7 @@ function CommandManyItems() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   <span>Delete</span>
                   <CommandShortcut>⌫</CommandShortcut>
@@ -319,6 +338,7 @@ function CommandManyItems() {
                     lucide="LayoutGridIcon"
                     tabler="IconLayoutGrid"
                     hugeicons="GridIcon"
+                    phosphor="GridFourIcon"
                   />
                   <span>Grid View</span>
                 </CommandItem>
@@ -327,6 +347,7 @@ function CommandManyItems() {
                     lucide="ListIcon"
                     tabler="IconList"
                     hugeicons="Menu05Icon"
+                    phosphor="ListIcon"
                   />
                   <span>List View</span>
                 </CommandItem>
@@ -335,6 +356,7 @@ function CommandManyItems() {
                     lucide="ZoomInIcon"
                     tabler="IconZoomIn"
                     hugeicons="ZoomInAreaIcon"
+                    phosphor="MagnifyingGlassPlusIcon"
                   />
                   <span>Zoom In</span>
                   <CommandShortcut>⌘+</CommandShortcut>
@@ -344,6 +366,7 @@ function CommandManyItems() {
                     lucide="ZoomOutIcon"
                     tabler="IconZoomOut"
                     hugeicons="ZoomOutAreaIcon"
+                    phosphor="MagnifyingGlassMinusIcon"
                   />
                   <span>Zoom Out</span>
                   <CommandShortcut>⌘-</CommandShortcut>
@@ -356,6 +379,7 @@ function CommandManyItems() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -365,6 +389,7 @@ function CommandManyItems() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -374,6 +399,7 @@ function CommandManyItems() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -383,6 +409,7 @@ function CommandManyItems() {
                     lucide="BellIcon"
                     tabler="IconBell"
                     hugeicons="NotificationIcon"
+                    phosphor="BellIcon"
                   />
                   <span>Notifications</span>
                 </CommandItem>
@@ -391,6 +418,7 @@ function CommandManyItems() {
                     lucide="HelpCircleIcon"
                     tabler="IconHelpCircle"
                     hugeicons="HelpCircleIcon"
+                    phosphor="QuestionIcon"
                   />
                   <span>Help & Support</span>
                 </CommandItem>
@@ -402,6 +430,7 @@ function CommandManyItems() {
                     lucide="CalculatorIcon"
                     tabler="IconCalculator"
                     hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
                   />
                   <span>Calculator</span>
                 </CommandItem>
@@ -410,6 +439,7 @@ function CommandManyItems() {
                     lucide="CalendarIcon"
                     tabler="IconCalendar"
                     hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
                   />
                   <span>Calendar</span>
                 </CommandItem>
@@ -418,6 +448,7 @@ function CommandManyItems() {
                     lucide="ImageIcon"
                     tabler="IconPhoto"
                     hugeicons="ImageIcon"
+                    phosphor="ImageIcon"
                   />
                   <span>Image Editor</span>
                 </CommandItem>
@@ -426,6 +457,7 @@ function CommandManyItems() {
                     lucide="CodeIcon"
                     tabler="IconCode"
                     hugeicons="CodeIcon"
+                    phosphor="CodeIcon"
                   />
                   <span>Code Editor</span>
                 </CommandItem>
diff --git a/apps/v4/registry/bases/base/examples/component-example.tsx b/apps/v4/registry/bases/base/examples/component-example.tsx
index 58a423c2a1..468defc7aa 100644
--- a/apps/v4/registry/bases/base/examples/component-example.tsx
+++ b/apps/v4/registry/bases/base/examples/component-example.tsx
@@ -102,6 +102,7 @@ function CardExample() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
                 data-icon="inline-start"
               />
               Show Dialog
@@ -113,6 +114,7 @@ function CardExample() {
                     lucide="BluetoothIcon"
                     tabler="IconBluetooth"
                     hugeicons="BluetoothIcon"
+                    phosphor="BluetoothIcon"
                   />
                 </AlertDialogMedia>
                 <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
@@ -174,6 +176,7 @@ function FormExample() {
                   lucide="MoreVerticalIcon"
                   tabler="IconDotsVertical"
                   hugeicons="MoreVerticalCircle01Icon"
+                  phosphor="DotsThreeVerticalIcon"
                 />
                 <span className="sr-only">More options</span>
               </DropdownMenuTrigger>
@@ -185,6 +188,7 @@ function FormExample() {
                       lucide="FileIcon"
                       tabler="IconFile"
                       hugeicons="FileIcon"
+                      phosphor="FileIcon"
                     />
                     New File
                     <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -194,6 +198,7 @@ function FormExample() {
                       lucide="FolderIcon"
                       tabler="IconFolder"
                       hugeicons="FolderIcon"
+                      phosphor="FolderIcon"
                     />
                     New Folder
                     <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -204,6 +209,7 @@ function FormExample() {
                         lucide="FolderOpenIcon"
                         tabler="IconFolderOpen"
                         hugeicons="FolderOpenIcon"
+                        phosphor="FolderOpenIcon"
                       />
                       Open Recent
                     </DropdownMenuSubTrigger>
@@ -216,6 +222,7 @@ function FormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Alpha
                           </DropdownMenuItem>
@@ -224,6 +231,7 @@ function FormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Beta
                           </DropdownMenuItem>
@@ -233,6 +241,7 @@ function FormExample() {
                                 lucide="MoreHorizontalIcon"
                                 tabler="IconDots"
                                 hugeicons="MoreHorizontalCircle01Icon"
+                                phosphor="DotsThreeOutlineIcon"
                               />
                               More Projects
                             </DropdownMenuSubTrigger>
@@ -243,6 +252,7 @@ function FormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Gamma
                                 </DropdownMenuItem>
@@ -251,6 +261,7 @@ function FormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Delta
                                 </DropdownMenuItem>
@@ -265,6 +276,7 @@ function FormExample() {
                               lucide="FolderSearchIcon"
                               tabler="IconFolderSearch"
                               hugeicons="SearchIcon"
+                              phosphor="MagnifyingGlassIcon"
                             />
                             Browse...
                           </DropdownMenuItem>
@@ -278,6 +290,7 @@ function FormExample() {
                       lucide="SaveIcon"
                       tabler="IconDeviceFloppy"
                       hugeicons="FloppyDiskIcon"
+                      phosphor="FloppyDiskIcon"
                     />
                     Save
                     <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -287,6 +300,7 @@ function FormExample() {
                       lucide="DownloadIcon"
                       tabler="IconDownload"
                       hugeicons="DownloadIcon"
+                      phosphor="DownloadIcon"
                     />
                     Export
                     <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -308,6 +322,7 @@ function FormExample() {
                       lucide="EyeIcon"
                       tabler="IconEye"
                       hugeicons="EyeIcon"
+                      phosphor="EyeIcon"
                     />
                     Show Sidebar
                   </DropdownMenuCheckboxItem>
@@ -324,6 +339,7 @@ function FormExample() {
                       lucide="LayoutIcon"
                       tabler="IconLayout"
                       hugeicons="LayoutIcon"
+                      phosphor="LayoutIcon"
                     />
                     Show Status Bar
                   </DropdownMenuCheckboxItem>
@@ -333,6 +349,7 @@ function FormExample() {
                         lucide="PaletteIcon"
                         tabler="IconPalette"
                         hugeicons="PaintBoardIcon"
+                        phosphor="PaletteIcon"
                       />
                       Theme
                     </DropdownMenuSubTrigger>
@@ -349,6 +366,7 @@ function FormExample() {
                                 lucide="SunIcon"
                                 tabler="IconSun"
                                 hugeicons="SunIcon"
+                                phosphor="SunIcon"
                               />
                               Light
                             </DropdownMenuRadioItem>
@@ -357,6 +375,7 @@ function FormExample() {
                                 lucide="MoonIcon"
                                 tabler="IconMoon"
                                 hugeicons="MoonIcon"
+                                phosphor="MoonIcon"
                               />
                               Dark
                             </DropdownMenuRadioItem>
@@ -365,6 +384,7 @@ function FormExample() {
                                 lucide="MonitorIcon"
                                 tabler="IconDeviceDesktop"
                                 hugeicons="ComputerIcon"
+                                phosphor="MonitorIcon"
                               />
                               System
                             </DropdownMenuRadioItem>
@@ -382,6 +402,7 @@ function FormExample() {
                       lucide="UserIcon"
                       tabler="IconUser"
                       hugeicons="UserIcon"
+                      phosphor="UserIcon"
                     />
                     Profile
                     <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
@@ -391,6 +412,7 @@ function FormExample() {
                       lucide="CreditCardIcon"
                       tabler="IconCreditCard"
                       hugeicons="CreditCardIcon"
+                      phosphor="CreditCardIcon"
                     />
                     Billing
                   </DropdownMenuItem>
@@ -400,6 +422,7 @@ function FormExample() {
                         lucide="SettingsIcon"
                         tabler="IconSettings"
                         hugeicons="SettingsIcon"
+                        phosphor="GearIcon"
                       />
                       Settings
                     </DropdownMenuSubTrigger>
@@ -412,6 +435,7 @@ function FormExample() {
                               lucide="KeyboardIcon"
                               tabler="IconKeyboard"
                               hugeicons="KeyboardIcon"
+                              phosphor="KeyboardIcon"
                             />
                             Keyboard Shortcuts
                           </DropdownMenuItem>
@@ -420,6 +444,7 @@ function FormExample() {
                               lucide="LanguagesIcon"
                               tabler="IconLanguage"
                               hugeicons="LanguageCircleIcon"
+                              phosphor="TranslateIcon"
                             />
                             Language
                           </DropdownMenuItem>
@@ -429,6 +454,7 @@ function FormExample() {
                                 lucide="BellIcon"
                                 tabler="IconBell"
                                 hugeicons="NotificationIcon"
+                                phosphor="BellIcon"
                               />
                               Notifications
                             </DropdownMenuSubTrigger>
@@ -451,6 +477,7 @@ function FormExample() {
                                       lucide="BellIcon"
                                       tabler="IconBell"
                                       hugeicons="NotificationIcon"
+                                      phosphor="BellIcon"
                                     />
                                     Push Notifications
                                   </DropdownMenuCheckboxItem>
@@ -467,6 +494,7 @@ function FormExample() {
                                       lucide="MailIcon"
                                       tabler="IconMail"
                                       hugeicons="MailIcon"
+                                      phosphor="EnvelopeIcon"
                                     />
                                     Email Notifications
                                   </DropdownMenuCheckboxItem>
@@ -482,6 +510,7 @@ function FormExample() {
                               lucide="ShieldIcon"
                               tabler="IconShield"
                               hugeicons="ShieldIcon"
+                              phosphor="ShieldIcon"
                             />
                             Privacy & Security
                           </DropdownMenuItem>
@@ -497,6 +526,7 @@ function FormExample() {
                       lucide="HelpCircleIcon"
                       tabler="IconHelpCircle"
                       hugeicons="HelpCircleIcon"
+                      phosphor="QuestionIcon"
                     />
                     Help & Support
                   </DropdownMenuItem>
@@ -505,6 +535,7 @@ function FormExample() {
                       lucide="FileTextIcon"
                       tabler="IconFileText"
                       hugeicons="File01Icon"
+                      phosphor="FileTextIcon"
                     />
                     Documentation
                   </DropdownMenuItem>
@@ -516,6 +547,7 @@ function FormExample() {
                       lucide="LogOutIcon"
                       tabler="IconLogout"
                       hugeicons="LogoutIcon"
+                      phosphor="SignOutIcon"
                     />
                     Sign Out
                     <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
diff --git a/apps/v4/registry/bases/base/examples/context-menu-example.tsx b/apps/v4/registry/bases/base/examples/context-menu-example.tsx
index b087612aee..96001aae31 100644
--- a/apps/v4/registry/bases/base/examples/context-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/context-menu-example.tsx
@@ -83,6 +83,7 @@ function ContextMenuWithIcons() {
                 lucide="CopyIcon"
                 tabler="IconCopy"
                 hugeicons="CopyIcon"
+                phosphor="CopyIcon"
               />
               Copy
             </ContextMenuItem>
@@ -91,6 +92,7 @@ function ContextMenuWithIcons() {
                 lucide="ScissorsIcon"
                 tabler="IconCut"
                 hugeicons="ScissorIcon"
+                phosphor="ScissorsIcon"
               />
               Cut
             </ContextMenuItem>
@@ -99,6 +101,7 @@ function ContextMenuWithIcons() {
                 lucide="ClipboardPasteIcon"
                 tabler="IconClipboard"
                 hugeicons="ClipboardIcon"
+                phosphor="ClipboardIcon"
               />
               Paste
             </ContextMenuItem>
@@ -110,6 +113,7 @@ function ContextMenuWithIcons() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </ContextMenuItem>
@@ -338,6 +342,7 @@ function ContextMenuWithDestructive() {
                 lucide="PencilIcon"
                 tabler="IconPencil"
                 hugeicons="EditIcon"
+                phosphor="PencilIcon"
               />
               Edit
             </ContextMenuItem>
@@ -346,6 +351,7 @@ function ContextMenuWithDestructive() {
                 lucide="ShareIcon"
                 tabler="IconShare"
                 hugeicons="ShareIcon"
+                phosphor="ShareIcon"
               />
               Share
             </ContextMenuItem>
@@ -357,6 +363,7 @@ function ContextMenuWithDestructive() {
                 lucide="ArchiveIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="ArchiveIcon"
               />
               Archive
             </ContextMenuItem>
@@ -365,6 +372,7 @@ function ContextMenuWithDestructive() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </ContextMenuItem>
@@ -457,6 +465,7 @@ function ContextMenuInDialog() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   Copy
                 </ContextMenuItem>
@@ -465,6 +474,7 @@ function ContextMenuInDialog() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   Cut
                 </ContextMenuItem>
@@ -473,6 +483,7 @@ function ContextMenuInDialog() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   Paste
                 </ContextMenuItem>
@@ -499,6 +510,7 @@ function ContextMenuInDialog() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   Delete
                 </ContextMenuItem>
diff --git a/apps/v4/registry/bases/base/examples/dialog-example.tsx b/apps/v4/registry/bases/base/examples/dialog-example.tsx
index 33b5093de3..7c2e32202b 100644
--- a/apps/v4/registry/bases/base/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dialog-example.tsx
@@ -501,6 +501,7 @@ function DialogChatSettings() {
                                 lucide="InfoIcon"
                                 tabler="IconInfoCircle"
                                 hugeicons="AlertCircleIcon"
+                                phosphor="InfoIcon"
                               />
                             </TooltipTrigger>
                             <TooltipContent className="flex items-center gap-2">
diff --git a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
index 23fb07e83b..43332eebd7 100644
--- a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
@@ -99,6 +99,7 @@ function DropdownMenuWithIcons() {
               lucide="UserIcon"
               tabler="IconUser"
               hugeicons="UserIcon"
+              phosphor="UserIcon"
             />
             Profile
           </DropdownMenuItem>
@@ -107,6 +108,7 @@ function DropdownMenuWithIcons() {
               lucide="CreditCardIcon"
               tabler="IconCreditCard"
               hugeicons="CreditCardIcon"
+              phosphor="CreditCardIcon"
             />
             Billing
           </DropdownMenuItem>
@@ -115,6 +117,7 @@ function DropdownMenuWithIcons() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
             />
             Settings
           </DropdownMenuItem>
@@ -124,6 +127,7 @@ function DropdownMenuWithIcons() {
               lucide="LogOutIcon"
               tabler="IconLogout"
               hugeicons="LogoutIcon"
+              phosphor="SignOutIcon"
             />
             Log out
           </DropdownMenuItem>
@@ -231,6 +235,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="LayoutIcon"
                 tabler="IconLayout"
                 hugeicons="LayoutIcon"
+                phosphor="LayoutIcon"
               />
               Status Bar
             </DropdownMenuCheckboxItem>
@@ -243,6 +248,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="ActivityIcon"
                 tabler="IconActivity"
                 hugeicons="ActivityIcon"
+                phosphor="ActivityIcon"
               />
               Activity Bar
             </DropdownMenuCheckboxItem>
@@ -254,6 +260,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="PanelLeftIcon"
                 tabler="IconLayoutSidebar"
                 hugeicons="LayoutLeftIcon"
+                phosphor="SidebarIcon"
               />
               Panel
             </DropdownMenuCheckboxItem>
@@ -287,6 +294,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUp01Icon"
+                  phosphor="ArrowUpIcon"
                 />
                 Top
               </DropdownMenuRadioItem>
@@ -295,6 +303,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowDownIcon"
                   tabler="IconArrowDown"
                   hugeicons="ArrowDown01Icon"
+                  phosphor="ArrowDownIcon"
                 />
                 Bottom
               </DropdownMenuRadioItem>
@@ -303,6 +312,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowRightIcon"
                   tabler="IconArrowRight"
                   hugeicons="ArrowRight01Icon"
+                  phosphor="ArrowRightIcon"
                 />
                 Right
               </DropdownMenuRadioItem>
@@ -342,6 +352,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="MailIcon"
                 tabler="IconMail"
                 hugeicons="MailIcon"
+                phosphor="EnvelopeIcon"
               />
               Email notifications
             </DropdownMenuCheckboxItem>
@@ -355,6 +366,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="MessageSquareIcon"
                 tabler="IconMessage"
                 hugeicons="MessageIcon"
+                phosphor="ChatCircleIcon"
               />
               SMS notifications
             </DropdownMenuCheckboxItem>
@@ -368,6 +380,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="BellIcon"
                 tabler="IconBell"
                 hugeicons="NotificationIcon"
+                phosphor="BellIcon"
               />
               Push notifications
             </DropdownMenuCheckboxItem>
@@ -401,6 +414,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="CreditCardIcon"
                   tabler="IconCreditCard"
                   hugeicons="CreditCardIcon"
+                  phosphor="CreditCardIcon"
                 />
                 Credit Card
               </DropdownMenuRadioItem>
@@ -409,6 +423,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="WalletIcon"
                   tabler="IconWallet"
                   hugeicons="WalletIcon"
+                  phosphor="WalletIcon"
                 />
                 PayPal
               </DropdownMenuRadioItem>
@@ -417,6 +432,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="Building2Icon"
                   tabler="IconBuildingBank"
                   hugeicons="BankIcon"
+                  phosphor="BankIcon"
                 />
                 Bank Transfer
               </DropdownMenuRadioItem>
@@ -443,6 +459,7 @@ function DropdownMenuWithDestructive() {
               lucide="PencilIcon"
               tabler="IconPencil"
               hugeicons="EditIcon"
+              phosphor="PencilIcon"
             />
             Edit
           </DropdownMenuItem>
@@ -451,6 +468,7 @@ function DropdownMenuWithDestructive() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="ShareIcon"
+              phosphor="ShareIcon"
             />
             Share
           </DropdownMenuItem>
@@ -460,6 +478,7 @@ function DropdownMenuWithDestructive() {
               lucide="ArchiveIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
             Archive
           </DropdownMenuItem>
@@ -468,6 +487,7 @@ function DropdownMenuWithDestructive() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="DeleteIcon"
+              phosphor="TrashIcon"
             />
             Delete
           </DropdownMenuItem>
@@ -486,6 +506,7 @@ function DropdownMenuWithAvatar() {
             lucide="BadgeCheckIcon"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadgeIcon"
+            phosphor="CheckCircleIcon"
           />
           Account
         </DropdownMenuItem>
@@ -494,6 +515,7 @@ function DropdownMenuWithAvatar() {
             lucide="CreditCardIcon"
             tabler="IconCreditCard"
             hugeicons="CreditCardIcon"
+            phosphor="CreditCardIcon"
           />
           Billing
         </DropdownMenuItem>
@@ -502,6 +524,7 @@ function DropdownMenuWithAvatar() {
             lucide="BellIcon"
             tabler="IconBell"
             hugeicons="NotificationIcon"
+            phosphor="BellIcon"
           />
           Notifications
         </DropdownMenuItem>
@@ -512,6 +535,7 @@ function DropdownMenuWithAvatar() {
           lucide="LogOutIcon"
           tabler="IconLogout"
           hugeicons="LogoutIcon"
+          phosphor="SignOutIcon"
         />
         Sign Out
       </DropdownMenuItem>
@@ -544,6 +568,7 @@ function DropdownMenuWithAvatar() {
               lucide="ChevronsUpDownIcon"
               tabler="IconSelector"
               hugeicons="UnfoldMoreIcon"
+              phosphor="CaretUpDownIcon"
               className="text-muted-foreground ml-auto"
             />
           </DropdownMenuTrigger>
@@ -597,6 +622,7 @@ function DropdownMenuInDialog() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
                 Copy
               </DropdownMenuItem>
@@ -605,6 +631,7 @@ function DropdownMenuInDialog() {
                   lucide="ScissorsIcon"
                   tabler="IconCut"
                   hugeicons="ScissorIcon"
+                  phosphor="ScissorsIcon"
                 />
                 Cut
               </DropdownMenuItem>
@@ -613,6 +640,7 @@ function DropdownMenuInDialog() {
                   lucide="ClipboardPasteIcon"
                   tabler="IconClipboard"
                   hugeicons="ClipboardIcon"
+                  phosphor="ClipboardIcon"
                 />
                 Paste
               </DropdownMenuItem>
@@ -635,6 +663,7 @@ function DropdownMenuInDialog() {
                   lucide="TrashIcon"
                   tabler="IconTrash"
                   hugeicons="DeleteIcon"
+                  phosphor="TrashIcon"
                 />
                 Delete
               </DropdownMenuItem>
@@ -670,6 +699,7 @@ function DropdownMenuComplex() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
               />
               New File
               <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -679,6 +709,7 @@ function DropdownMenuComplex() {
                 lucide="FolderIcon"
                 tabler="IconFolder"
                 hugeicons="FolderIcon"
+                phosphor="FolderIcon"
               />
               New Folder
               <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -689,6 +720,7 @@ function DropdownMenuComplex() {
                   lucide="FolderOpenIcon"
                   tabler="IconFolderOpen"
                   hugeicons="FolderOpenIcon"
+                  phosphor="FolderOpenIcon"
                 />
                 Open Recent
               </DropdownMenuSubTrigger>
@@ -701,6 +733,7 @@ function DropdownMenuComplex() {
                         lucide="FileCodeIcon"
                         tabler="IconFileCode"
                         hugeicons="CodeIcon"
+                        phosphor="CodeIcon"
                       />
                       Project Alpha
                     </DropdownMenuItem>
@@ -709,6 +742,7 @@ function DropdownMenuComplex() {
                         lucide="FileCodeIcon"
                         tabler="IconFileCode"
                         hugeicons="CodeIcon"
+                        phosphor="CodeIcon"
                       />
                       Project Beta
                     </DropdownMenuItem>
@@ -718,6 +752,7 @@ function DropdownMenuComplex() {
                           lucide="MoreHorizontalIcon"
                           tabler="IconDots"
                           hugeicons="MoreHorizontalCircle01Icon"
+                          phosphor="DotsThreeOutlineIcon"
                         />
                         More Projects
                       </DropdownMenuSubTrigger>
@@ -728,6 +763,7 @@ function DropdownMenuComplex() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="FileCodeIcon"
                             />
                             Project Gamma
                           </DropdownMenuItem>
@@ -736,6 +772,7 @@ function DropdownMenuComplex() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="FileCodeIcon"
                             />
                             Project Delta
                           </DropdownMenuItem>
@@ -750,6 +787,7 @@ function DropdownMenuComplex() {
                         lucide="FolderSearchIcon"
                         tabler="IconFolderSearch"
                         hugeicons="SearchIcon"
+                        phosphor="MagnifyingGlassIcon"
                       />
                       Browse...
                     </DropdownMenuItem>
@@ -763,6 +801,7 @@ function DropdownMenuComplex() {
                 lucide="SaveIcon"
                 tabler="IconDeviceFloppy"
                 hugeicons="FloppyDiskIcon"
+                phosphor="FloppyDiskIcon"
               />
               Save
               <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -772,6 +811,7 @@ function DropdownMenuComplex() {
                 lucide="DownloadIcon"
                 tabler="IconDownload"
                 hugeicons="DownloadIcon"
+                phosphor="DownloadIcon"
               />
               Export
               <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -790,6 +830,7 @@ function DropdownMenuComplex() {
                 lucide="EyeIcon"
                 tabler="IconEye"
                 hugeicons="EyeIcon"
+                phosphor="EyeIcon"
               />
               Show Sidebar
             </DropdownMenuCheckboxItem>
@@ -803,6 +844,7 @@ function DropdownMenuComplex() {
                 lucide="LayoutIcon"
                 tabler="IconLayout"
                 hugeicons="LayoutIcon"
+                phosphor="LayoutIcon"
               />
               Show Status Bar
             </DropdownMenuCheckboxItem>
@@ -812,6 +854,7 @@ function DropdownMenuComplex() {
                   lucide="PaletteIcon"
                   tabler="IconPalette"
                   hugeicons="PaintBoardIcon"
+                  phosphor="PaletteIcon"
                 />
                 Theme
               </DropdownMenuSubTrigger>
@@ -828,6 +871,7 @@ function DropdownMenuComplex() {
                           lucide="SunIcon"
                           tabler="IconSun"
                           hugeicons="SunIcon"
+                          phosphor="SunIcon"
                         />
                         Light
                       </DropdownMenuRadioItem>
@@ -836,6 +880,7 @@ function DropdownMenuComplex() {
                           lucide="MoonIcon"
                           tabler="IconMoon"
                           hugeicons="MoonIcon"
+                          phosphor="MoonIcon"
                         />
                         Dark
                       </DropdownMenuRadioItem>
@@ -844,6 +889,7 @@ function DropdownMenuComplex() {
                           lucide="MonitorIcon"
                           tabler="IconDeviceDesktop"
                           hugeicons="ComputerIcon"
+                          phosphor="MonitorIcon"
                         />
                         System
                       </DropdownMenuRadioItem>
@@ -861,6 +907,7 @@ function DropdownMenuComplex() {
                 lucide="UserIcon"
                 tabler="IconUser"
                 hugeicons="UserIcon"
+                phosphor="UserIcon"
               />
               Profile
               <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
@@ -870,6 +917,7 @@ function DropdownMenuComplex() {
                 lucide="CreditCardIcon"
                 tabler="IconCreditCard"
                 hugeicons="CreditCardIcon"
+                phosphor="CreditCardIcon"
               />
               Billing
             </DropdownMenuItem>
@@ -879,6 +927,7 @@ function DropdownMenuComplex() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="SettingsIcon"
+                  phosphor="GearIcon"
                 />
                 Settings
               </DropdownMenuSubTrigger>
@@ -891,6 +940,7 @@ function DropdownMenuComplex() {
                         lucide="KeyboardIcon"
                         tabler="IconKeyboard"
                         hugeicons="KeyboardIcon"
+                        phosphor="KeyboardIcon"
                       />
                       Keyboard Shortcuts
                     </DropdownMenuItem>
@@ -899,6 +949,7 @@ function DropdownMenuComplex() {
                         lucide="LanguagesIcon"
                         tabler="IconLanguage"
                         hugeicons="LanguageCircleIcon"
+                        phosphor="TranslateIcon"
                       />
                       Language
                     </DropdownMenuItem>
@@ -908,6 +959,7 @@ function DropdownMenuComplex() {
                           lucide="BellIcon"
                           tabler="IconBell"
                           hugeicons="NotificationIcon"
+                          phosphor="BellIcon"
                         />
                         Notifications
                       </DropdownMenuSubTrigger>
@@ -930,6 +982,7 @@ function DropdownMenuComplex() {
                                 lucide="BellIcon"
                                 tabler="IconBell"
                                 hugeicons="NotificationIcon"
+                                phosphor="BellIcon"
                               />
                               Push Notifications
                             </DropdownMenuCheckboxItem>
@@ -946,6 +999,7 @@ function DropdownMenuComplex() {
                                 lucide="MailIcon"
                                 tabler="IconMail"
                                 hugeicons="MailIcon"
+                                phosphor="EnvelopeIcon"
                               />
                               Email Notifications
                             </DropdownMenuCheckboxItem>
@@ -961,6 +1015,7 @@ function DropdownMenuComplex() {
                         lucide="ShieldIcon"
                         tabler="IconShield"
                         hugeicons="ShieldIcon"
+                        phosphor="ShieldIcon"
                       />
                       Privacy & Security
                     </DropdownMenuItem>
@@ -976,6 +1031,7 @@ function DropdownMenuComplex() {
                 lucide="HelpCircleIcon"
                 tabler="IconHelpCircle"
                 hugeicons="HelpCircleIcon"
+                phosphor="QuestionIcon"
               />
               Help & Support
             </DropdownMenuItem>
@@ -984,6 +1040,7 @@ function DropdownMenuComplex() {
                 lucide="FileTextIcon"
                 tabler="IconFileText"
                 hugeicons="File01Icon"
+                phosphor="FileTextIcon"
               />
               Documentation
             </DropdownMenuItem>
@@ -995,6 +1052,7 @@ function DropdownMenuComplex() {
                 lucide="LogOutIcon"
                 tabler="IconLogout"
                 hugeicons="LogoutIcon"
+                phosphor="SignOutIcon"
               />
               Sign Out
               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
diff --git a/apps/v4/registry/bases/base/examples/empty-example.tsx b/apps/v4/registry/bases/base/examples/empty-example.tsx
index 381e584751..777214c05b 100644
--- a/apps/v4/registry/bases/base/examples/empty-example.tsx
+++ b/apps/v4/registry/bases/base/examples/empty-example.tsx
@@ -61,6 +61,7 @@ function EmptyBasic() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
             />
           </Button>
         </EmptyContent>
@@ -92,6 +93,7 @@ function EmptyWithMutedBackground() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
             />
           </Button>
         </EmptyContent>
@@ -119,6 +121,7 @@ function EmptyWithBorder() {
                 lucide="CircleDashedIcon"
                 tabler="IconCircleDashed"
                 hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -144,6 +147,7 @@ function EmptyWithIcon() {
               lucide="FolderIcon"
               tabler="IconFolder"
               hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
             />
           </EmptyMedia>
           <EmptyTitle>Nothing to see here</EmptyTitle>
@@ -158,6 +162,7 @@ function EmptyWithIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             New Post
@@ -187,6 +192,7 @@ function EmptyWithMutedBackgroundAlt() {
                 lucide="CircleDashedIcon"
                 tabler="IconCircleDashed"
                 hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -212,6 +218,7 @@ function EmptyInCard() {
               lucide="FolderIcon"
               tabler="IconFolder"
               hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
             />
           </EmptyMedia>
           <EmptyTitle>No projects yet</EmptyTitle>
@@ -238,6 +245,7 @@ function EmptyInCard() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
             />
           </Button>
         </EmptyContent>
diff --git a/apps/v4/registry/bases/base/examples/input-group-example.tsx b/apps/v4/registry/bases/base/examples/input-group-example.tsx
index 78db5c5483..2e38e15fff 100644
--- a/apps/v4/registry/bases/base/examples/input-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-group-example.tsx
@@ -131,6 +131,7 @@ function InputGroupWithAddons() {
                 lucide="SearchIcon"
                 tabler="IconSearch"
                 hugeicons="SearchIcon"
+                phosphor="MagnifyingGlassIcon"
                 className="text-muted-foreground"
               />
             </InputGroupAddon>
@@ -147,6 +148,7 @@ function InputGroupWithAddons() {
                 lucide="EyeOffIcon"
                 tabler="IconEyeClosed"
                 hugeicons="ViewOffIcon"
+                phosphor="EyeSlashIcon"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -162,6 +164,7 @@ function InputGroupWithAddons() {
                 lucide="MicIcon"
                 tabler="IconMicrophone"
                 hugeicons="VoiceIcon"
+                phosphor="MicrophoneIcon"
                 className="text-muted-foreground"
               />
             </InputGroupAddon>
@@ -170,6 +173,7 @@ function InputGroupWithAddons() {
                 lucide="RadioIcon"
                 tabler="IconPlayerRecordFilled"
                 hugeicons="RecordIcon"
+                phosphor="RecordIcon"
                 className="animate-pulse text-red-500"
               />
             </InputGroupAddon>
@@ -185,6 +189,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -200,6 +205,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -214,6 +220,7 @@ function InputGroupWithAddons() {
                 lucide="StarIcon"
                 tabler="IconStar"
                 hugeicons="StarIcon"
+                phosphor="StarIcon"
               />
               <InputGroupButton
                 size="icon-xs"
@@ -223,6 +230,7 @@ function InputGroupWithAddons() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -231,6 +239,7 @@ function InputGroupWithAddons() {
                 lucide="RadioIcon"
                 tabler="IconPlayerRecordFilled"
                 hugeicons="RecordIcon"
+                phosphor="RecordIcon"
                 className="animate-pulse text-red-500"
               />
             </InputGroupAddon>
@@ -245,6 +254,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -310,6 +320,7 @@ function InputGroupWithButtons() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -322,6 +333,7 @@ function InputGroupWithButtons() {
                   lucide="TrashIcon"
                   tabler="IconTrash"
                   hugeicons="DeleteIcon"
+                  phosphor="TrashIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -357,6 +369,7 @@ function InputGroupWithTooltip({
                     lucide="InfoIcon"
                     tabler="IconInfoCircle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="InfoIcon"
                   />
                 </TooltipTrigger>
                 <TooltipContent>This is content in a tooltip.</TooltipContent>
@@ -383,6 +396,7 @@ function InputGroupWithTooltip({
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
                     hugeicons="ArrowDownIcon"
+                    phosphor="CaretDownIcon"
                   />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
@@ -418,6 +432,7 @@ function InputGroupWithTooltip({
                     lucide="InfoIcon"
                     tabler="IconInfoCircle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="InfoIcon"
                   />
                 </InputGroupButton>
               </PopoverTrigger>
@@ -443,6 +458,7 @@ function InputGroupWithTooltip({
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -462,6 +478,7 @@ function InputGroupWithTooltip({
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -514,6 +531,7 @@ function InputGroupWithKbd() {
                 lucide="SparklesIcon"
                 tabler="IconServerSpark"
                 hugeicons="SparklesIcon"
+                phosphor="SparkleIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -534,6 +552,7 @@ function InputGroupWithKbd() {
                   lucide="CheckIcon"
                   tabler="IconCheck"
                   hugeicons="Tick02Icon"
+                  phosphor="CheckIcon"
                   className="size-3 text-white"
                 />
               </div>
@@ -553,6 +572,7 @@ function InputGroupWithKbd() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
@@ -568,6 +588,7 @@ function InputGroupWithKbd() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
@@ -582,6 +603,7 @@ function InputGroupWithKbd() {
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -595,6 +617,7 @@ function InputGroupWithKbd() {
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -646,6 +669,7 @@ function InputGroupInCard() {
                     lucide="MailIcon"
                     tabler="IconMail"
                     hugeicons="MailIcon"
+                    phosphor="EnvelopeIcon"
                   />
                 </InputGroupAddon>
               </InputGroup>
@@ -662,6 +686,7 @@ function InputGroupInCard() {
                     lucide="ExternalLinkIcon"
                     tabler="IconExternalLink"
                     hugeicons="LinkSquare02Icon"
+                    phosphor="ArrowSquareOutIcon"
                   />
                 </InputGroupAddon>
               </InputGroup>
@@ -755,6 +780,7 @@ function InputGroupTextareaExamples() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -783,6 +809,7 @@ function InputGroupTextareaExamples() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUpIcon"
+                  phosphor="ArrowUpIcon"
                 />
                 <span className="sr-only">Send</span>
               </InputGroupButton>
@@ -821,6 +848,7 @@ function InputGroupTextareaExamples() {
                   lucide="CodeIcon"
                   tabler="IconBrandJavascript"
                   hugeicons="CodeIcon"
+                  phosphor="CodeIcon"
                 />
                 script.js
               </InputGroupText>
@@ -829,6 +857,7 @@ function InputGroupTextareaExamples() {
                   lucide="RefreshCwIcon"
                   tabler="IconRefresh"
                   hugeicons="RefreshIcon"
+                  phosphor="ArrowClockwiseIcon"
                 />
               </InputGroupButton>
               <InputGroupButton size="icon-xs" variant="ghost">
@@ -836,6 +865,7 @@ function InputGroupTextareaExamples() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
diff --git a/apps/v4/registry/bases/base/examples/input-otp-example.tsx b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
index a6d7901137..9ca4d59bc4 100644
--- a/apps/v4/registry/bases/base/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
@@ -246,6 +246,7 @@ function InputOTPForm() {
                     lucide="RefreshCwIcon"
                     hugeicons="RefreshIcon"
                     tabler="IconRefresh"
+                    phosphor="ArrowClockwiseIcon"
                     data-icon="inline-start"
                   />
                   Resend Code
diff --git a/apps/v4/registry/bases/base/examples/item-example.tsx b/apps/v4/registry/bases/base/examples/item-example.tsx
index 5330efaf6f..a000333f9f 100644
--- a/apps/v4/registry/bases/base/examples/item-example.tsx
+++ b/apps/v4/registry/bases/base/examples/item-example.tsx
@@ -91,6 +91,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -103,6 +104,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -118,6 +120,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -133,6 +136,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -205,6 +209,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -217,6 +222,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -232,6 +238,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -247,6 +254,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -319,6 +327,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -331,6 +340,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -346,6 +356,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -361,6 +372,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -437,6 +449,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -449,6 +462,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -464,6 +478,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -479,6 +494,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -555,6 +571,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -567,6 +584,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -582,6 +600,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -597,6 +616,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -673,6 +693,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -685,6 +706,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -700,6 +722,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -715,6 +738,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -791,6 +815,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -803,6 +828,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -818,6 +844,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -833,6 +860,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -909,6 +937,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -921,6 +950,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -936,6 +966,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -951,6 +982,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1027,6 +1059,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1039,6 +1072,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1054,6 +1088,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1069,6 +1104,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1123,6 +1159,7 @@ function DefaultLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1135,6 +1172,7 @@ function DefaultLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1185,6 +1223,7 @@ function OutlineLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1197,6 +1236,7 @@ function OutlineLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1247,6 +1287,7 @@ function MutedLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1259,6 +1300,7 @@ function MutedLinkItems() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1323,6 +1365,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1336,6 +1379,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1349,6 +1393,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1413,6 +1458,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1427,6 +1473,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1441,6 +1488,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1455,6 +1503,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="ArchiveIcon"
             />
           </ItemMedia>
           <ItemContent>
diff --git a/apps/v4/registry/bases/base/examples/kbd-example.tsx b/apps/v4/registry/bases/base/examples/kbd-example.tsx
index 527b531b02..9ed6f85500 100644
--- a/apps/v4/registry/bases/base/examples/kbd-example.tsx
+++ b/apps/v4/registry/bases/base/examples/kbd-example.tsx
@@ -89,6 +89,7 @@ function KbdWithIcons() {
             lucide="CircleDashedIcon"
             tabler="IconCircleDashed"
             hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
           />
         </Kbd>
         <Kbd>
@@ -96,6 +97,7 @@ function KbdWithIcons() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
           />
         </Kbd>
         <Kbd>
@@ -103,6 +105,7 @@ function KbdWithIcons() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight01Icon"
+            phosphor="ArrowRightIcon"
           />
         </Kbd>
       </KbdGroup>
@@ -119,6 +122,7 @@ function KbdWithIconsAndText() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
           />
           Left
         </Kbd>
@@ -127,6 +131,7 @@ function KbdWithIconsAndText() {
             lucide="CircleDashedIcon"
             tabler="IconCircleDashed"
             hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
           />
           Voice Enabled
         </Kbd>
@@ -157,6 +162,7 @@ function KbdInTooltip() {
             lucide="SaveIcon"
             tabler="IconDeviceFloppy"
             hugeicons="FloppyDiskIcon"
+            phosphor="FloppyDiskIcon"
           />
         </TooltipTrigger>
         <TooltipContent className="pr-1.5">
diff --git a/apps/v4/registry/bases/base/examples/menubar-example.tsx b/apps/v4/registry/bases/base/examples/menubar-example.tsx
index be0957fe03..902422b0a7 100644
--- a/apps/v4/registry/bases/base/examples/menubar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/menubar-example.tsx
@@ -220,6 +220,7 @@ function MenubarWithIcons() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
               />
               New File <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
@@ -228,6 +229,7 @@ function MenubarWithIcons() {
                 lucide="FolderIcon"
                 tabler="IconFolder"
                 hugeicons="FolderIcon"
+                phosphor="FolderIcon"
               />
               Open Folder
             </MenubarItem>
@@ -237,6 +239,7 @@ function MenubarWithIcons() {
                 lucide="SaveIcon"
                 tabler="IconDeviceFloppy"
                 hugeicons="FloppyDiskIcon"
+                phosphor="FloppyDiskIcon"
               />
               Save <MenubarShortcut>⌘S</MenubarShortcut>
             </MenubarItem>
@@ -251,6 +254,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Settings
               </MenubarItem>
@@ -259,6 +263,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Help
               </MenubarItem>
@@ -268,6 +273,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Delete
               </MenubarItem>
@@ -335,6 +341,7 @@ function MenubarFormat() {
                 lucide="BoldIcon"
                 tabler="IconBold"
                 hugeicons="TextBoldIcon"
+                phosphor="TextBIcon"
               />
               Bold <MenubarShortcut>⌘B</MenubarShortcut>
             </MenubarItem>
@@ -343,6 +350,7 @@ function MenubarFormat() {
                 lucide="ItalicIcon"
                 tabler="IconItalic"
                 hugeicons="TextItalicIcon"
+                phosphor="TextItalicIcon"
               />
               Italic <MenubarShortcut>⌘I</MenubarShortcut>
             </MenubarItem>
@@ -351,6 +359,7 @@ function MenubarFormat() {
                 lucide="UnderlineIcon"
                 tabler="IconUnderline"
                 hugeicons="TextUnderlineIcon"
+                phosphor="TextUnderlineIcon"
               />
               Underline <MenubarShortcut>⌘U</MenubarShortcut>
             </MenubarItem>
@@ -387,6 +396,7 @@ function MenubarInsert() {
                   lucide="ImageIcon"
                   tabler="IconPhoto"
                   hugeicons="ImageIcon"
+                  phosphor="ImageIcon"
                 />
                 Media
               </MenubarSubTrigger>
@@ -402,6 +412,7 @@ function MenubarInsert() {
                 lucide="LinkIcon"
                 tabler="IconLink"
                 hugeicons="LinkIcon"
+                phosphor="LinkIcon"
               />
               Link <MenubarShortcut>⌘K</MenubarShortcut>
             </MenubarItem>
@@ -410,6 +421,7 @@ function MenubarInsert() {
                 lucide="TableIcon"
                 tabler="IconTable"
                 hugeicons="TableIcon"
+                phosphor="TableIcon"
               />
               Table
             </MenubarItem>
@@ -423,6 +435,7 @@ function MenubarInsert() {
                 lucide="SearchIcon"
                 tabler="IconSearch"
                 hugeicons="SearchIcon"
+                phosphor="MagnifyingGlassIcon"
               />
               Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
             </MenubarItem>
@@ -431,6 +444,7 @@ function MenubarInsert() {
                 lucide="CheckIcon"
                 tabler="IconCheck"
                 hugeicons="Tick02Icon"
+                phosphor="CheckIcon"
               />
               Spell Check
             </MenubarItem>
@@ -453,6 +467,7 @@ function MenubarDestructive() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
               />
               New File <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
@@ -461,6 +476,7 @@ function MenubarDestructive() {
                 lucide="FolderIcon"
                 tabler="IconFolder"
                 hugeicons="FolderIcon"
+                phosphor="FolderIcon"
               />
               Open Folder
             </MenubarItem>
@@ -470,6 +486,7 @@ function MenubarDestructive() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
             </MenubarItem>
@@ -483,6 +500,7 @@ function MenubarDestructive() {
                 lucide="UserIcon"
                 tabler="IconUser"
                 hugeicons="UserIcon"
+                phosphor="UserIcon"
               />
               Profile
             </MenubarItem>
@@ -491,6 +509,7 @@ function MenubarDestructive() {
                 lucide="SettingsIcon"
                 tabler="IconSettings"
                 hugeicons="SettingsIcon"
+                phosphor="GearIcon"
               />
               Settings
             </MenubarItem>
@@ -500,6 +519,7 @@ function MenubarDestructive() {
                 lucide="LogOutIcon"
                 tabler="IconLogout"
                 hugeicons="LogoutIcon"
+                phosphor="SignOutIcon"
               />
               Sign out
             </MenubarItem>
@@ -509,6 +529,7 @@ function MenubarDestructive() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </MenubarItem>
@@ -542,6 +563,7 @@ function MenubarInDialog() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   Copy
                 </MenubarItem>
@@ -550,6 +572,7 @@ function MenubarInDialog() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   Cut
                 </MenubarItem>
@@ -558,6 +581,7 @@ function MenubarInDialog() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   Paste
                 </MenubarItem>
@@ -578,6 +602,7 @@ function MenubarInDialog() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   Delete
                 </MenubarItem>
diff --git a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
index 978e2d59ed..12268b6aa1 100644
--- a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
@@ -115,6 +115,7 @@ function NavigationMenuBasic() {
                       lucide="CircleAlertIcon"
                       tabler="IconExclamationCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="WarningCircleIcon"
                     />
                     Backlog
                   </NavigationMenuLink>
@@ -127,6 +128,7 @@ function NavigationMenuBasic() {
                       lucide="CircleAlertIcon"
                       tabler="IconExclamationCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="WarningCircleIcon"
                     />
                     To Do
                   </NavigationMenuLink>
@@ -139,6 +141,7 @@ function NavigationMenuBasic() {
                       lucide="CircleAlertIcon"
                       tabler="IconExclamationCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="WarningCircleIcon"
                     />
                     Done
                   </NavigationMenuLink>
diff --git a/apps/v4/registry/bases/base/examples/progress-example.tsx b/apps/v4/registry/bases/base/examples/progress-example.tsx
index d16797cfd1..9706b8cde9 100644
--- a/apps/v4/registry/bases/base/examples/progress-example.tsx
+++ b/apps/v4/registry/bases/base/examples/progress-example.tsx
@@ -118,6 +118,7 @@ function FileUploadList() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
                 className="size-5"
               />
             </ItemMedia>
diff --git a/apps/v4/registry/bases/base/examples/select-example.tsx b/apps/v4/registry/bases/base/examples/select-example.tsx
index 389eb15e4d..8a728c91c0 100644
--- a/apps/v4/registry/bases/base/examples/select-example.tsx
+++ b/apps/v4/registry/bases/base/examples/select-example.tsx
@@ -101,6 +101,7 @@ function SelectWithIcons() {
             lucide="ChartLineIcon"
             tabler="IconChartLine"
             hugeicons="Chart03Icon"
+            phosphor="ChartLineIcon"
           />
           Chart Type
         </>
@@ -114,6 +115,7 @@ function SelectWithIcons() {
             lucide="ChartLineIcon"
             tabler="IconChartLine"
             hugeicons="Chart03Icon"
+            phosphor="ChartLineIcon"
           />
           Line
         </>
@@ -127,6 +129,7 @@ function SelectWithIcons() {
             lucide="ChartBarIcon"
             tabler="IconChartBar"
             hugeicons="Chart03Icon"
+            phosphor="ChartBarIcon"
           />
           Bar
         </>
@@ -140,6 +143,7 @@ function SelectWithIcons() {
             lucide="ChartPieIcon"
             tabler="IconChartPie"
             hugeicons="Chart03Icon"
+            phosphor="ChartPieIcon"
           />
           Pie
         </>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-example.tsx
index 8d0a211571..b51265c313 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-example.tsx
@@ -193,6 +193,7 @@ export default function SidebarExample() {
                         lucide="ChevronsUpDownIcon"
                         tabler="IconSelector"
                         hugeicons="UnfoldMoreIcon"
+                        phosphor="CaretUpDownIcon"
                       />
                     </ItemActions>
                   </Item>
@@ -209,6 +210,7 @@ export default function SidebarExample() {
                           lucide="CheckIcon"
                           tabler="IconCheck"
                           hugeicons="Tick02Icon"
+                          phosphor="CheckIcon"
                           className="ml-auto"
                         />
                       )}
@@ -233,6 +235,7 @@ export default function SidebarExample() {
                   lucide="SearchIcon"
                   tabler="IconSearch"
                   hugeicons="SearchIcon"
+                  phosphor="MagnifyingGlassIcon"
                   className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none"
                 />
               </SidebarGroupContent>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
index 1b108eb594..301ad6e1d6 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
@@ -203,6 +203,7 @@ export default function SidebarFloatingExample() {
                         lucide="MoreHorizontalIcon"
                         tabler="IconDots"
                         hugeicons="MoreHorizontalCircle01Icon"
+                        phosphor="DotsThreeOutlineIcon"
                         className="ml-auto"
                       />
                     </DropdownMenuTrigger>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
index 93b2e1d761..372c44f6c8 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
@@ -79,6 +79,7 @@ export default function SidebarIconExample() {
             lucide="TerminalSquareIcon"
             tabler="IconTerminal2"
             hugeicons="ComputerTerminalIcon"
+            phosphor="TerminalIcon"
           />
         ),
         isActive: true,
@@ -105,6 +106,7 @@ export default function SidebarIconExample() {
             lucide="BotIcon"
             tabler="IconRobot"
             hugeicons="RoboticIcon"
+            phosphor="RobotIcon"
           />
         ),
         items: [
@@ -130,6 +132,7 @@ export default function SidebarIconExample() {
             lucide="BookOpen"
             tabler="IconBook"
             hugeicons="BookOpen02Icon"
+            phosphor="BookOpenIcon"
           />
         ),
         items: [
@@ -159,6 +162,7 @@ export default function SidebarIconExample() {
             lucide="Settings2Icon"
             tabler="IconSettings"
             hugeicons="Settings05Icon"
+            phosphor="GearIcon"
           />
         ),
         items: [
@@ -190,6 +194,7 @@ export default function SidebarIconExample() {
             lucide="FrameIcon"
             tabler="IconFrame"
             hugeicons="CropIcon"
+            phosphor="CropIcon"
           />
         ),
       },
@@ -201,6 +206,7 @@ export default function SidebarIconExample() {
             lucide="PieChartIcon"
             tabler="IconChartPie"
             hugeicons="PieChartIcon"
+            phosphor="ChartPieIcon"
           />
         ),
       },
@@ -212,6 +218,7 @@ export default function SidebarIconExample() {
             lucide="MapIcon"
             tabler="IconMap"
             hugeicons="MapsIcon"
+            phosphor="MapTrifoldIcon"
           />
         ),
       },
@@ -280,6 +287,7 @@ export default function SidebarIconExample() {
                     lucide="ChevronsUpDownIcon"
                     tabler="IconSelector"
                     hugeicons="UnfoldMoreIcon"
+                    phosphor="CaretUpDownIcon"
                   />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
@@ -322,6 +330,7 @@ export default function SidebarIconExample() {
                       lucide="ChevronRightIcon"
                       tabler="IconChevronRight"
                       hugeicons="ArrowRight01Icon"
+                      phosphor="CaretRightIcon"
                       className="ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90"
                     />
                   </SidebarMenuButton>
@@ -382,6 +391,7 @@ export default function SidebarIconExample() {
                     lucide="ChevronsUpDownIcon"
                     tabler="IconSelector"
                     hugeicons="UnfoldMoreIcon"
+                    phosphor="CaretUpDownIcon"
                   />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
index eba307551f..b00e394748 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
@@ -38,6 +38,7 @@ export default function SidebarInsetExample() {
             lucide="HomeIcon"
             tabler="IconHome"
             hugeicons="Home01Icon"
+            phosphor="HouseIcon"
           />
         ),
         isActive: true,
@@ -60,6 +61,7 @@ export default function SidebarInsetExample() {
             lucide="ChartLineIcon"
             tabler="IconChartLine"
             hugeicons="ChartIcon"
+            phosphor="ChartLineIcon"
           />
         ),
         items: [
@@ -81,6 +83,7 @@ export default function SidebarInsetExample() {
             lucide="ShoppingBagIcon"
             tabler="IconShoppingBag"
             hugeicons="ShoppingBag01Icon"
+            phosphor="BagIcon"
           />
         ),
         items: [
@@ -106,6 +109,7 @@ export default function SidebarInsetExample() {
             lucide="ShoppingCartIcon"
             tabler="IconShoppingCart"
             hugeicons="ShoppingCart01Icon"
+            phosphor="ShoppingCartIcon"
           />
         ),
         items: [
@@ -127,6 +131,7 @@ export default function SidebarInsetExample() {
             lucide="FileIcon"
             tabler="IconFile"
             hugeicons="File01Icon"
+            phosphor="FileIcon"
           />
         ),
       },
@@ -138,6 +143,7 @@ export default function SidebarInsetExample() {
             lucide="UserIcon"
             tabler="IconUser"
             hugeicons="UserIcon"
+            phosphor="UserIcon"
           />
         ),
       },
@@ -149,6 +155,7 @@ export default function SidebarInsetExample() {
             lucide="Settings2Icon"
             tabler="IconSettings"
             hugeicons="Settings05Icon"
+            phosphor="GearIcon"
           />
         ),
       },
@@ -162,6 +169,7 @@ export default function SidebarInsetExample() {
             lucide="LifeBuoy"
             tabler="IconLifebuoy"
             hugeicons="ChartRingIcon"
+            phosphor="LifebuoyIcon"
           />
         ),
       },
@@ -173,6 +181,7 @@ export default function SidebarInsetExample() {
             lucide="Send"
             tabler="IconSend"
             hugeicons="SentIcon"
+            phosphor="PaperPlaneTiltIcon"
           />
         ),
       },
@@ -210,6 +219,7 @@ export default function SidebarInsetExample() {
                           lucide="ChevronRightIcon"
                           tabler="IconChevronRight"
                           hugeicons="ArrowRight01Icon"
+                          phosphor="CaretRightIcon"
                         />
                         <span className="sr-only">Toggle</span>
                       </CollapsibleTrigger>
diff --git a/apps/v4/registry/bases/base/examples/spinner-example.tsx b/apps/v4/registry/bases/base/examples/spinner-example.tsx
index ca2dc88706..4433c4f5e4 100644
--- a/apps/v4/registry/bases/base/examples/spinner-example.tsx
+++ b/apps/v4/registry/bases/base/examples/spinner-example.tsx
@@ -139,6 +139,7 @@ function SpinnerInEmpty() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </EmptyContent>
diff --git a/apps/v4/registry/bases/base/examples/table-example.tsx b/apps/v4/registry/bases/base/examples/table-example.tsx
index 3f3b5c57d4..66e4499b65 100644
--- a/apps/v4/registry/bases/base/examples/table-example.tsx
+++ b/apps/v4/registry/bases/base/examples/table-example.tsx
@@ -274,6 +274,7 @@ function TableWithActions() {
                     lucide="MoreHorizontalIcon"
                     tabler="IconDots"
                     hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeOutlineIcon"
                   />
                   <span className="sr-only">Open menu</span>
                 </DropdownMenuTrigger>
@@ -302,6 +303,7 @@ function TableWithActions() {
                     lucide="MoreHorizontalIcon"
                     tabler="IconDots"
                     hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeOutlineIcon"
                   />
                   <span className="sr-only">Open menu</span>
                 </DropdownMenuTrigger>
@@ -330,6 +332,7 @@ function TableWithActions() {
                     lucide="MoreHorizontalIcon"
                     tabler="IconDots"
                     hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeOutlineIcon"
                   />
                   <span className="sr-only">Open menu</span>
                 </DropdownMenuTrigger>
diff --git a/apps/v4/registry/bases/base/examples/tabs-example.tsx b/apps/v4/registry/bases/base/examples/tabs-example.tsx
index ab7bc067e7..bb00a02eb3 100644
--- a/apps/v4/registry/bases/base/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/base/examples/tabs-example.tsx
@@ -112,6 +112,7 @@ function TabsWithIcons() {
               lucide="AppWindowIcon"
               tabler="IconAppWindow"
               hugeicons="CursorInWindowIcon"
+              phosphor="AppWindowIcon"
             />
             Preview
           </TabsTrigger>
@@ -120,6 +121,7 @@ function TabsWithIcons() {
               lucide="CodeIcon"
               tabler="IconCode"
               hugeicons="CodeIcon"
+              phosphor="CodeIcon"
             />
             Code
           </TabsTrigger>
@@ -139,6 +141,7 @@ function TabsIconOnly() {
               lucide="HomeIcon"
               tabler="IconHome"
               hugeicons="HomeIcon"
+              phosphor="HouseIcon"
             />
           </TabsTrigger>
           <TabsTrigger value="search">
@@ -146,6 +149,7 @@ function TabsIconOnly() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </TabsTrigger>
           <TabsTrigger value="settings">
@@ -153,6 +157,7 @@ function TabsIconOnly() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
             />
           </TabsTrigger>
         </TabsList>
@@ -260,6 +265,7 @@ function TabsWithDropdown() {
                 lucide="MoreHorizontalIcon"
                 tabler="IconDots"
                 hugeicons="MoreHorizontalCircle01Icon"
+                phosphor="DotsThreeOutlineIcon"
               />
               <span className="sr-only">More options</span>
             </DropdownMenuTrigger>
diff --git a/apps/v4/registry/bases/base/examples/toggle-example.tsx b/apps/v4/registry/bases/base/examples/toggle-example.tsx
index e9065836a2..89cc50a34b 100644
--- a/apps/v4/registry/bases/base/examples/toggle-example.tsx
+++ b/apps/v4/registry/bases/base/examples/toggle-example.tsx
@@ -30,6 +30,7 @@ function ToggleBasic() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </Toggle>
         <Toggle aria-label="Toggle italic">
@@ -37,6 +38,7 @@ function ToggleBasic() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </Toggle>
         <Toggle aria-label="Toggle underline">
@@ -44,6 +46,7 @@ function ToggleBasic() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </Toggle>
       </div>
@@ -60,6 +63,7 @@ function ToggleOutline() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
           Italic
         </Toggle>
@@ -68,6 +72,7 @@ function ToggleOutline() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
           Bold
         </Toggle>
@@ -137,6 +142,7 @@ function ToggleWithButtonIcon() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
           </Button>
           <Toggle variant="outline" aria-label="Toggle sm icon" size="sm">
@@ -144,6 +150,7 @@ function ToggleWithButtonIcon() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
           </Toggle>
         </div>
@@ -153,6 +160,7 @@ function ToggleWithButtonIcon() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
           </Button>
           <Toggle
@@ -164,6 +172,7 @@ function ToggleWithButtonIcon() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
           </Toggle>
         </div>
@@ -173,6 +182,7 @@ function ToggleWithButtonIcon() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
           </Button>
           <Toggle variant="outline" aria-label="Toggle lg icon" size="lg">
@@ -180,6 +190,7 @@ function ToggleWithButtonIcon() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
           </Toggle>
         </div>
@@ -198,6 +209,7 @@ function ToggleWithButtonIconText() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
               data-icon="inline-start"
             />
             Button
@@ -207,6 +219,7 @@ function ToggleWithButtonIconText() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
             Toggle
           </Toggle>
@@ -217,6 +230,7 @@ function ToggleWithButtonIconText() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
               data-icon="inline-start"
             />
             Button
@@ -230,6 +244,7 @@ function ToggleWithButtonIconText() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
             Toggle
           </Toggle>
@@ -240,6 +255,7 @@ function ToggleWithButtonIconText() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
               data-icon="inline-start"
             />
             Button
@@ -249,6 +265,7 @@ function ToggleWithButtonIconText() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
             Toggle
           </Toggle>
@@ -282,6 +299,7 @@ function ToggleWithIcon() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
             className="group-data-[state=on]/toggle:fill-accent-foreground"
           />
         </Toggle>
@@ -290,6 +308,7 @@ function ToggleWithIcon() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
             className="group-data-[state=on]/toggle:fill-accent-foreground"
           />
           Bookmark
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 6ce71c0e3c..0d6d82903e 100644
--- a/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
@@ -47,6 +47,7 @@ function ToggleGroupBasic() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -54,6 +55,7 @@ function ToggleGroupBasic() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -61,6 +63,7 @@ function ToggleGroupBasic() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -92,6 +95,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -99,6 +103,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -106,6 +111,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -189,6 +195,7 @@ function ToggleGroupWithIcons() {
             lucide="StarIcon"
             tabler="IconStar"
             hugeicons="StarIcon"
+            phosphor="StarIcon"
           />
           Star
         </ToggleGroupItem>
@@ -201,6 +208,7 @@ function ToggleGroupWithIcons() {
             lucide="HeartIcon"
             tabler="IconHeart"
             hugeicons="FavouriteIcon"
+            phosphor="HeartIcon"
           />
           Heart
         </ToggleGroupItem>
@@ -213,6 +221,7 @@ function ToggleGroupWithIcons() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
           />
           Bookmark
         </ToggleGroupItem>
@@ -277,6 +286,7 @@ function ToggleGroupSort() {
             lucide="ArrowDownIcon"
             tabler="IconArrowDown"
             hugeicons="ArrowDownIcon"
+            phosphor="ArrowDownIcon"
           />
           Newest
         </ToggleGroupItem>
@@ -285,6 +295,7 @@ function ToggleGroupSort() {
             lucide="ArrowUpIcon"
             tabler="IconArrowUp"
             hugeicons="ArrowUpIcon"
+            phosphor="ArrowUpIcon"
           />
           Oldest
         </ToggleGroupItem>
@@ -293,6 +304,7 @@ function ToggleGroupSort() {
             lucide="TrendingUpIcon"
             tabler="IconTrendingUp"
             hugeicons="TradeUpIcon"
+            phosphor="TrendUpIcon"
           />
           Popular
         </ToggleGroupItem>
@@ -347,6 +359,7 @@ function ToggleGroupVertical() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -354,6 +367,7 @@ function ToggleGroupVertical() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -361,6 +375,7 @@ function ToggleGroupVertical() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -403,6 +418,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -410,6 +426,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -417,6 +434,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
diff --git a/apps/v4/registry/bases/base/examples/tooltip-example.tsx b/apps/v4/registry/bases/base/examples/tooltip-example.tsx
index a46309b424..7b2c8d6d7d 100644
--- a/apps/v4/registry/bases/base/examples/tooltip-example.tsx
+++ b/apps/v4/registry/bases/base/examples/tooltip-example.tsx
@@ -73,6 +73,7 @@ function TooltipWithIcon() {
             lucide="InfoIcon"
             tabler="IconInfoCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="InfoIcon"
           />
           <span className="sr-only">Info</span>
         </TooltipTrigger>
@@ -126,6 +127,7 @@ function TooltipWithKeyboard() {
             lucide="SaveIcon"
             tabler="IconDeviceFloppy"
             hugeicons="FloppyDiskIcon"
+            phosphor="FloppyDiskIcon"
           />
         </TooltipTrigger>
         <TooltipContent className="pr-1.5">
diff --git a/apps/v4/registry/bases/base/ui/accordion.tsx b/apps/v4/registry/bases/base/ui/accordion.tsx
index c1b1fd9934..7766fa4eb2 100644
--- a/apps/v4/registry/bases/base/ui/accordion.tsx
+++ b/apps/v4/registry/bases/base/ui/accordion.tsx
@@ -46,6 +46,7 @@ function AccordionTrigger({
           tabler="IconChevronDown"
           data-slot="accordion-trigger-icon"
           hugeicons="ArrowDown01Icon"
+          phosphor="CaretDownIcon"
           className="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
         <IconPlaceholder
@@ -53,6 +54,7 @@ function AccordionTrigger({
           tabler="IconChevronUp"
           data-slot="accordion-trigger-icon"
           hugeicons="ArrowUp01Icon"
+          phosphor="CaretUpIcon"
           className="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>
diff --git a/apps/v4/registry/bases/base/ui/breadcrumb.tsx b/apps/v4/registry/bases/base/ui/breadcrumb.tsx
index d4d50635b2..49e4d7fbf0 100644
--- a/apps/v4/registry/bases/base/ui/breadcrumb.tsx
+++ b/apps/v4/registry/bases/base/ui/breadcrumb.tsx
@@ -90,6 +90,7 @@ function BreadcrumbSeparator({
           lucide="ChevronRightIcon"
           tabler="IconChevronRight"
           hugeicons="ArrowRight01Icon"
+          phosphor="CaretRightIcon"
         />
       )}
     </li>
@@ -115,6 +116,7 @@ function BreadcrumbEllipsis({
         lucide="MoreHorizontalIcon"
         tabler="IconDots"
         hugeicons="MoreHorizontalCircle01Icon"
+        phosphor="DotsThreeIcon"
       />
       <span className="sr-only">More</span>
     </span>
diff --git a/apps/v4/registry/bases/base/ui/calendar.tsx b/apps/v4/registry/bases/base/ui/calendar.tsx
index c6ccf44e3f..00fa136dfc 100644
--- a/apps/v4/registry/bases/base/ui/calendar.tsx
+++ b/apps/v4/registry/bases/base/ui/calendar.tsx
@@ -148,6 +148,7 @@ function Calendar({
                 lucide="ChevronLeftIcon"
                 tabler="IconChevronLeft"
                 hugeicons="ArrowLeftIcon"
+                phosphor="CaretLeftIcon"
                 className={cn("size-4", className)}
                 {...props}
               />
@@ -160,6 +161,7 @@ function Calendar({
                 lucide="ChevronRightIcon"
                 tabler="IconChevronRight"
                 hugeicons="ArrowRightIcon"
+                phosphor="CaretRightIcon"
                 className={cn("size-4", className)}
                 {...props}
               />
@@ -171,6 +173,7 @@ function Calendar({
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDownIcon"
+              phosphor="CaretDownIcon"
               className={cn("size-4", className)}
               {...props}
             />
diff --git a/apps/v4/registry/bases/base/ui/carousel.tsx b/apps/v4/registry/bases/base/ui/carousel.tsx
index bbf1cec340..0bd4bcda58 100644
--- a/apps/v4/registry/bases/base/ui/carousel.tsx
+++ b/apps/v4/registry/bases/base/ui/carousel.tsx
@@ -199,6 +199,7 @@ function CarouselPrevious({
         lucide="ChevronLeftIcon"
         tabler="IconChevronLeft"
         hugeicons="ArrowLeft01Icon"
+        phosphor="CaretLeftIcon"
       />
       <span className="sr-only">Previous slide</span>
     </Button>
@@ -233,6 +234,7 @@ function CarouselNext({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
       />
       <span className="sr-only">Next slide</span>
     </Button>
diff --git a/apps/v4/registry/bases/base/ui/checkbox.tsx b/apps/v4/registry/bases/base/ui/checkbox.tsx
index e073308325..4497487634 100644
--- a/apps/v4/registry/bases/base/ui/checkbox.tsx
+++ b/apps/v4/registry/bases/base/ui/checkbox.tsx
@@ -23,6 +23,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
           lucide="CheckIcon"
           tabler="IconCheck"
           hugeicons="Tick02Icon"
+          phosphor="CheckIcon"
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
diff --git a/apps/v4/registry/bases/base/ui/combobox.tsx b/apps/v4/registry/bases/base/ui/combobox.tsx
index 2e31177b57..8ee85a4768 100644
--- a/apps/v4/registry/bases/base/ui/combobox.tsx
+++ b/apps/v4/registry/bases/base/ui/combobox.tsx
@@ -35,6 +35,7 @@ function ComboboxTrigger({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
         className="cn-combobox-trigger-icon pointer-events-none"
       />
     </ComboboxPrimitive.Trigger>
@@ -53,6 +54,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
         lucide="XIcon"
         tabler="IconX"
         hugeicons="Cancel01Icon"
+        phosphor="XIcon"
         className="cn-combobox-clear-icon pointer-events-none"
       />
     </ComboboxPrimitive.Clear>
@@ -166,6 +168,7 @@ function ComboboxItem({
           lucide="CheckIcon"
           tabler="IconCheck"
           hugeicons="Tick02Icon"
+          phosphor="CheckIcon"
           className="cn-combobox-item-indicator-icon pointer-events-none"
         />
       </ComboboxPrimitive.ItemIndicator>
@@ -267,6 +270,7 @@ function ComboboxChip({
             lucide="XIcon"
             tabler="IconX"
             hugeicons="Cancel01Icon"
+            phosphor="XIcon"
             className="cn-combobox-chip-indicator-icon pointer-events-none"
           />
         </ComboboxPrimitive.ChipRemove>
diff --git a/apps/v4/registry/bases/base/ui/command.tsx b/apps/v4/registry/bases/base/ui/command.tsx
index 2f80c3c4f4..fc645014b2 100644
--- a/apps/v4/registry/bases/base/ui/command.tsx
+++ b/apps/v4/registry/bases/base/ui/command.tsx
@@ -83,6 +83,7 @@ function CommandInput({
             lucide="SearchIcon"
             tabler="IconSearch"
             hugeicons="SearchIcon"
+            phosphor="MagnifyingGlassIcon"
             className="cn-command-input-icon"
           />
         </InputGroupAddon>
@@ -165,6 +166,7 @@ function CommandItem({
         lucide="CheckIcon"
         tabler="IconCheck"
         hugeicons="Tick02Icon"
+        phosphor="CheckIcon"
         className="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
diff --git a/apps/v4/registry/bases/base/ui/context-menu.tsx b/apps/v4/registry/bases/base/ui/context-menu.tsx
index b7eb88f2eb..2072e90f45 100644
--- a/apps/v4/registry/bases/base/ui/context-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/context-menu.tsx
@@ -138,6 +138,7 @@ function ContextMenuSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto"
       />
     </ContextMenuPrimitive.SubmenuTrigger>
@@ -179,6 +180,7 @@ function ContextMenuCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </ContextMenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -218,6 +220,7 @@ function ContextMenuRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </ContextMenuPrimitive.RadioItemIndicator>
       </span>
diff --git a/apps/v4/registry/bases/base/ui/dialog.tsx b/apps/v4/registry/bases/base/ui/dialog.tsx
index 27cefdaeb8..6fe97ea262 100644
--- a/apps/v4/registry/bases/base/ui/dialog.tsx
+++ b/apps/v4/registry/bases/base/ui/dialog.tsx
@@ -71,6 +71,7 @@ function DialogContent({
               lucide="XIcon"
               tabler="IconX"
               hugeicons="Cancel01Icon"
+              phosphor="XIcon"
             />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
diff --git a/apps/v4/registry/bases/base/ui/dropdown-menu.tsx b/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
index 156fd345cd..a3460d048d 100644
--- a/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
@@ -123,6 +123,7 @@ function DropdownMenuSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto"
       />
     </MenuPrimitive.SubmenuTrigger>
@@ -175,6 +176,7 @@ function DropdownMenuCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -215,6 +217,7 @@ function DropdownMenuRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenuPrimitive.RadioItemIndicator>
       </span>
diff --git a/apps/v4/registry/bases/base/ui/input-otp.tsx b/apps/v4/registry/bases/base/ui/input-otp.tsx
index 98e97ea6cd..1f657e2676 100644
--- a/apps/v4/registry/bases/base/ui/input-otp.tsx
+++ b/apps/v4/registry/bases/base/ui/input-otp.tsx
@@ -82,6 +82,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
         lucide="MinusIcon"
         tabler="IconMinus"
         hugeicons="MinusSignIcon"
+        phosphor="MinusIcon"
       />
     </div>
   )
diff --git a/apps/v4/registry/bases/base/ui/menubar.tsx b/apps/v4/registry/bases/base/ui/menubar.tsx
index 0b6a25f479..7a36c42a9d 100644
--- a/apps/v4/registry/bases/base/ui/menubar.tsx
+++ b/apps/v4/registry/bases/base/ui/menubar.tsx
@@ -122,6 +122,7 @@ function MenubarCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenuPrimitive.CheckboxItemIndicator>
       </span>
@@ -156,6 +157,7 @@ function MenubarRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenuPrimitive.RadioItemIndicator>
       </span>
diff --git a/apps/v4/registry/bases/base/ui/native-select.tsx b/apps/v4/registry/bases/base/ui/native-select.tsx
index 16bae2e4ff..59324e1025 100644
--- a/apps/v4/registry/bases/base/ui/native-select.tsx
+++ b/apps/v4/registry/bases/base/ui/native-select.tsx
@@ -31,6 +31,7 @@ function NativeSelect({
         lucide="ChevronDownIcon"
         tabler="IconSelector"
         hugeicons="UnfoldMoreIcon"
+        phosphor="CaretDownIcon"
         className="cn-native-select-icon pointer-events-none absolute select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
diff --git a/apps/v4/registry/bases/base/ui/navigation-menu.tsx b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
index 395284cf77..89103ff2d3 100644
--- a/apps/v4/registry/bases/base/ui/navigation-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
@@ -73,6 +73,7 @@ function NavigationMenuTrigger({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
         className="cn-navigation-menu-trigger-icon"
         aria-hidden="true"
       />
diff --git a/apps/v4/registry/bases/base/ui/pagination.tsx b/apps/v4/registry/bases/base/ui/pagination.tsx
index eded5829d3..c72509595a 100644
--- a/apps/v4/registry/bases/base/ui/pagination.tsx
+++ b/apps/v4/registry/bases/base/ui/pagination.tsx
@@ -80,6 +80,7 @@ function PaginationPrevious({
         lucide="ChevronLeftIcon"
         tabler="IconChevronLeft"
         hugeicons="ArrowLeft01Icon"
+        phosphor="CaretLeftIcon"
         data-icon="inline-start"
       />
       <span className="cn-pagination-previous-text hidden sm:block">
@@ -105,6 +106,7 @@ function PaginationNext({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         data-icon="inline-end"
       />
     </PaginationLink>
@@ -129,6 +131,7 @@ function PaginationEllipsis({
         lucide="MoreHorizontalIcon"
         tabler="IconDots"
         hugeicons="MoreHorizontalCircle01Icon"
+        phosphor="DotsThreeIcon"
       />
       <span className="sr-only">More pages</span>
     </span>
diff --git a/apps/v4/registry/bases/base/ui/radio-group.tsx b/apps/v4/registry/bases/base/ui/radio-group.tsx
index ea8673954e..3cf69e30bd 100644
--- a/apps/v4/registry/bases/base/ui/radio-group.tsx
+++ b/apps/v4/registry/bases/base/ui/radio-group.tsx
@@ -34,6 +34,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
           lucide="CircleIcon"
           tabler="IconCircle"
           hugeicons="CircleIcon"
+          phosphor="CircleIcon"
           className="cn-radio-group-indicator-icon"
         />
       </RadioPrimitive.Indicator>
diff --git a/apps/v4/registry/bases/base/ui/select.tsx b/apps/v4/registry/bases/base/ui/select.tsx
index 84142e5047..b2d0159d47 100644
--- a/apps/v4/registry/bases/base/ui/select.tsx
+++ b/apps/v4/registry/bases/base/ui/select.tsx
@@ -53,6 +53,7 @@ function SelectTrigger({
             lucide="ChevronDownIcon"
             tabler="IconSelector"
             hugeicons="UnfoldMoreIcon"
+            phosphor="CaretDownIcon"
             className="cn-select-trigger-icon pointer-events-none"
           />
         }
@@ -139,6 +140,7 @@ function SelectItem({
           lucide="CheckIcon"
           tabler="IconCheck"
           hugeicons="Tick02Icon"
+          phosphor="CheckIcon"
           className="cn-select-item-indicator-icon pointer-events-none"
         />
       </SelectPrimitive.ItemIndicator>
@@ -173,6 +175,7 @@ function SelectScrollUpButton({
         lucide="ChevronUpIcon"
         tabler="IconChevronUp"
         hugeicons="ArrowUp01Icon"
+        phosphor="CaretUpIcon"
       />
     </SelectPrimitive.ScrollUpArrow>
   )
@@ -192,6 +195,7 @@ function SelectScrollDownButton({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
       />
     </SelectPrimitive.ScrollDownArrow>
   )
diff --git a/apps/v4/registry/bases/base/ui/sheet.tsx b/apps/v4/registry/bases/base/ui/sheet.tsx
index 60df3f2f07..ec9a3bb4f8 100644
--- a/apps/v4/registry/bases/base/ui/sheet.tsx
+++ b/apps/v4/registry/bases/base/ui/sheet.tsx
@@ -68,6 +68,7 @@ function SheetContent({
               lucide="XIcon"
               tabler="IconX"
               hugeicons="Cancel01Icon"
+              phosphor="XIcon"
             />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
diff --git a/apps/v4/registry/bases/base/ui/sidebar.tsx b/apps/v4/registry/bases/base/ui/sidebar.tsx
index dac0a0e555..94ae799cdd 100644
--- a/apps/v4/registry/bases/base/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/base/ui/sidebar.tsx
@@ -275,6 +275,7 @@ function SidebarTrigger({
         lucide="PanelLeftIcon"
         tabler="IconLayoutSidebar"
         hugeicons="SidebarLeftIcon"
+        phosphor="SidebarIcon"
       />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
diff --git a/apps/v4/registry/bases/base/ui/sonner.tsx b/apps/v4/registry/bases/base/ui/sonner.tsx
index 40709d4231..897bd01cd7 100644
--- a/apps/v4/registry/bases/base/ui/sonner.tsx
+++ b/apps/v4/registry/bases/base/ui/sonner.tsx
@@ -18,6 +18,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="CircleCheckIcon"
             tabler="IconCircleCheck"
             hugeicons="CheckmarkCircle02Icon"
+            phosphor="CheckCircleIcon"
             className="size-4"
           />
         ),
@@ -26,6 +27,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="InfoIcon"
             tabler="IconInfoCircle"
             hugeicons="InformationCircleIcon"
+            phosphor="InfoIcon"
             className="size-4"
           />
         ),
@@ -34,6 +36,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="TriangleAlertIcon"
             tabler="IconAlertTriangle"
             hugeicons="Alert02Icon"
+            phosphor="WarningIcon"
             className="size-4"
           />
         ),
@@ -42,6 +45,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="OctagonXIcon"
             tabler="IconAlertOctagon"
             hugeicons="MultiplicationSignCircleIcon"
+            phosphor="XCircleIcon"
             className="size-4"
           />
         ),
@@ -50,6 +54,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="Loader2Icon"
             tabler="IconLoader"
             hugeicons="Loading03Icon"
+            phosphor="SpinnerIcon"
             className="size-4 animate-spin"
           />
         ),
diff --git a/apps/v4/registry/bases/base/ui/spinner.tsx b/apps/v4/registry/bases/base/ui/spinner.tsx
index cd3b6f18e0..4afd56651a 100644
--- a/apps/v4/registry/bases/base/ui/spinner.tsx
+++ b/apps/v4/registry/bases/base/ui/spinner.tsx
@@ -7,6 +7,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
       lucide="Loader2Icon"
       tabler="IconLoader"
       hugeicons="Loading03Icon"
+      phosphor="SpinnerIcon"
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}
diff --git a/apps/v4/registry/bases/radix/blocks/chatgpt.tsx b/apps/v4/registry/bases/radix/blocks/chatgpt.tsx
index cdde4d8f65..79f2e58a72 100644
--- a/apps/v4/registry/bases/radix/blocks/chatgpt.tsx
+++ b/apps/v4/registry/bases/radix/blocks/chatgpt.tsx
@@ -110,6 +110,7 @@ function PromptForm() {
                         lucide="PlusIcon"
                         tabler="IconPlus"
                         hugeicons="PlusSignIcon"
+                        phosphor="PlusIcon"
                       />
                     </InputGroupButton>
                   </TooltipTrigger>
@@ -127,6 +128,7 @@ function PromptForm() {
                     lucide="PaperclipIcon"
                     tabler="IconPaperclip"
                     hugeicons="AttachmentIcon"
+                    phosphor="PaperclipIcon"
                   />
                   Add photos & files
                 </DropdownMenuItem>
@@ -135,6 +137,7 @@ function PromptForm() {
                     lucide="SparklesIcon"
                     tabler="IconSparkles"
                     hugeicons="SparklesIcon"
+                    phosphor="SparkleIcon"
                   />
                   Deep research
                 </DropdownMenuItem>
@@ -143,6 +146,7 @@ function PromptForm() {
                     lucide="ShoppingBagIcon"
                     tabler="IconShoppingBag"
                     hugeicons="ShoppingBag01Icon"
+                    phosphor="BagIcon"
                   />
                   Shopping research
                 </DropdownMenuItem>
@@ -151,6 +155,7 @@ function PromptForm() {
                     lucide="WandIcon"
                     tabler="IconWand"
                     hugeicons="MagicWand05Icon"
+                    phosphor="MagicWandIcon"
                   />
                   Create image
                 </DropdownMenuItem>
@@ -161,6 +166,7 @@ function PromptForm() {
                         lucide="MousePointerIcon"
                         tabler="IconPointer"
                         hugeicons="Cursor01Icon"
+                        phosphor="HandPointingIcon"
                       />
                       Agent mode
                     </DropdownMenuItem>
@@ -178,6 +184,7 @@ function PromptForm() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     More
                   </DropdownMenuSubTrigger>
@@ -187,6 +194,7 @@ function PromptForm() {
                         lucide="ShareIcon"
                         tabler="IconShare"
                         hugeicons="Share03Icon"
+                        phosphor="ShareIcon"
                       />
                       Add sources
                     </DropdownMenuItem>
@@ -195,6 +203,7 @@ function PromptForm() {
                         lucide="BookOpenIcon"
                         tabler="IconBook"
                         hugeicons="BookIcon"
+                        phosphor="BookOpenIcon"
                       />
                       Study and learn
                     </DropdownMenuItem>
@@ -203,6 +212,7 @@ function PromptForm() {
                         lucide="GlobeIcon"
                         tabler="IconWorld"
                         hugeicons="GlobalIcon"
+                        phosphor="GlobeIcon"
                       />
                       Web search
                     </DropdownMenuItem>
@@ -211,6 +221,7 @@ function PromptForm() {
                         lucide="PenToolIcon"
                         tabler="IconPencil"
                         hugeicons="PenIcon"
+                        phosphor="PencilIcon"
                       />
                       Canvas
                     </DropdownMenuItem>
@@ -230,6 +241,7 @@ function PromptForm() {
                     lucide="AudioLinesIcon"
                     tabler="IconMicrophone"
                     hugeicons="AudioWave01Icon"
+                    phosphor="MicrophoneIcon"
                   />
                 </InputGroupButton>
               </TooltipTrigger>
@@ -244,6 +256,7 @@ function PromptForm() {
                 lucide="ArrowUpIcon"
                 tabler="IconArrowUp"
                 hugeicons="ArrowUp02Icon"
+                phosphor="ArrowUpIcon"
               />
             </InputGroupButton>
           </InputGroupAddon>
@@ -267,6 +280,7 @@ function ModelSelector() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               className="text-muted-foreground size-4"
             />
           </Button>
@@ -412,6 +426,7 @@ function CreateProjectForm() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="Settings01Icon"
+                    phosphor="GearIcon"
                   />
                   <span className="sr-only">Memory</span>
                 </Button>
@@ -478,6 +493,7 @@ function CreateProjectForm() {
                             { "--color": selectedColor } as React.CSSProperties
                           }
                           lucide="FolderIcon"
+                          phosphor="FolderIcon"
                           tabler="IconFolder"
                           hugeicons="FolderIcon"
                           className="text-(--color)"
@@ -539,6 +555,7 @@ function CreateProjectForm() {
                         lucide="CircleCheckIcon"
                         tabler="IconCircleCheck"
                         hugeicons="CheckmarkCircle02Icon"
+                        phosphor="CheckCircleIcon"
                         data-icon="inline-start"
                         className="hidden group-data-[checked=true]/badge:inline"
                       />
@@ -554,6 +571,7 @@ function CreateProjectForm() {
                   lucide="LightbulbIcon"
                   tabler="IconBulb"
                   hugeicons="BulbIcon"
+                  phosphor="LightbulbIcon"
                 />
                 <AlertDescription className="text-xs">
                   Projects keep chats, files, and custom instructions in one
diff --git a/apps/v4/registry/bases/radix/blocks/github.tsx b/apps/v4/registry/bases/radix/blocks/github.tsx
index 011f3d13fb..bbe09a57cb 100644
--- a/apps/v4/registry/bases/radix/blocks/github.tsx
+++ b/apps/v4/registry/bases/radix/blocks/github.tsx
@@ -160,6 +160,7 @@ function CodespacesCard() {
                           lucide="PlusIcon"
                           tabler="IconPlus"
                           hugeicons="PlusSignIcon"
+                          phosphor="PlusIcon"
                         />
                       </Button>
                     </TooltipTrigger>
@@ -176,6 +177,7 @@ function CodespacesCard() {
                               lucide="MoreHorizontalIcon"
                               tabler="IconDots"
                               hugeicons="MoreHorizontalCircle01Icon"
+                              phosphor="DotsThreeOutlineIcon"
                             />
                           </Button>
                         </DropdownMenuTrigger>
@@ -194,6 +196,7 @@ function CodespacesCard() {
                           lucide="PlusIcon"
                           tabler="IconPlus"
                           hugeicons="PlusSignIcon"
+                          phosphor="PlusIcon"
                         />
                         New with options...
                       </DropdownMenuItem>
@@ -202,6 +205,7 @@ function CodespacesCard() {
                           lucide="ContainerIcon"
                           tabler="IconBox"
                           hugeicons="CubeIcon"
+                          phosphor="CubeIcon"
                         />
                         Configure dev container
                       </DropdownMenuItem>
@@ -210,6 +214,7 @@ function CodespacesCard() {
                           lucide="ZapIcon"
                           tabler="IconBolt"
                           hugeicons="ZapIcon"
+                          phosphor="LightningIcon"
                         />
                         Set up prebuilds
                       </DropdownMenuItem>
@@ -219,6 +224,7 @@ function CodespacesCard() {
                           lucide="ServerIcon"
                           tabler="IconServer"
                           hugeicons="ServerStackIcon"
+                          phosphor="HardDrivesIcon"
                         />
                         Manage codespaces
                       </DropdownMenuItem>
@@ -227,6 +233,7 @@ function CodespacesCard() {
                           lucide="ShareIcon"
                           tabler="IconShare2"
                           hugeicons="Share03Icon"
+                          phosphor="ShareIcon"
                         />
                         Share deep link
                       </DropdownMenuItem>
@@ -235,6 +242,7 @@ function CodespacesCard() {
                           lucide="InfoIcon"
                           tabler="IconInfoCircle"
                           hugeicons="AlertCircleIcon"
+                          phosphor="InfoIcon"
                         />
                         What are codespaces?
                       </DropdownMenuItem>
@@ -250,6 +258,7 @@ function CodespacesCard() {
                       lucide="ServerIcon"
                       tabler="IconServer"
                       hugeicons="ServerStackIcon"
+                      phosphor="HardDrivesIcon"
                     />
                   </EmptyMedia>
                   <EmptyTitle>No codespaces</EmptyTitle>
@@ -298,6 +307,7 @@ function CodespacesCard() {
                       lucide="TerminalIcon"
                       tabler="IconTerminal"
                       hugeicons="ComputerTerminal01Icon"
+                      phosphor="TerminalIcon"
                       className="size-4"
                     />
                     Clone
@@ -311,6 +321,7 @@ function CodespacesCard() {
                           lucide="InfoIcon"
                           tabler="IconInfoCircle"
                           hugeicons="AlertCircleIcon"
+                          phosphor="InfoIcon"
                         />
                       </Button>
                     </TooltipTrigger>
@@ -342,6 +353,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -368,6 +380,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -394,6 +407,7 @@ function CodespacesCard() {
                               lucide="CopyIcon"
                               tabler="IconCopy"
                               hugeicons="Copy01Icon"
+                              phosphor="CopyIcon"
                             />
                           </InputGroupButton>
                         </InputGroupAddon>
@@ -422,6 +436,7 @@ function CodespacesCard() {
                     lucide="MonitorIcon"
                     tabler="IconDeviceDesktop"
                     hugeicons="ComputerIcon"
+                    phosphor="MonitorIcon"
                     data-icon="inline-start"
                   />
                   Open with GitHub Desktop
@@ -435,6 +450,7 @@ function CodespacesCard() {
                     lucide="DownloadIcon"
                     tabler="IconDownload"
                     hugeicons="DownloadIcon"
+                    phosphor="DownloadIcon"
                     data-icon="inline-start"
                   />
                   Download ZIP
@@ -461,6 +477,7 @@ function RepositoryToolbar() {
                 lucide="SearchIcon"
                 tabler="IconSearch"
                 hugeicons="SearchIcon"
+                phosphor="MagnifyingGlassIcon"
               />
             </InputGroupButton>
           </InputGroupAddon>
@@ -476,6 +493,7 @@ function RepositoryToolbar() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDown01Icon"
+                phosphor="CaretDownIcon"
                 data-icon="inline-end"
               />
             </Button>
@@ -486,6 +504,7 @@ function RepositoryToolbar() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
               Create new file
             </DropdownMenuItem>
@@ -494,6 +513,7 @@ function RepositoryToolbar() {
                 lucide="UploadIcon"
                 hugeicons="Upload01Icon"
                 tabler="IconUpload"
+                phosphor="UploadIcon"
               />
               Upload files
             </DropdownMenuItem>
@@ -508,6 +528,7 @@ function RepositoryToolbar() {
                     lucide="CloudCogIcon"
                     hugeicons="AiCloud01Icon"
                     tabler="IconCloudCog"
+                    phosphor="CloudArrowUpIcon"
                   />
                 </Button>
               </PopoverTrigger>
@@ -532,6 +553,7 @@ function RepositoryToolbar() {
                               lucide="GitBranchIcon"
                               hugeicons="GitBranchIcon"
                               tabler="IconGitBranch"
+                              phosphor="GitBranchIcon"
                             />
                           </InputGroupButton>
                         </TooltipTrigger>
@@ -605,6 +627,7 @@ function RepositoryToolbar() {
                               lucide="BotIcon"
                               hugeicons="RoboticIcon"
                               tabler="IconRobot"
+                              phosphor="RobotIcon"
                             />
                           </InputGroupButton>
                         </TooltipTrigger>
@@ -641,6 +664,7 @@ function RepositoryToolbar() {
                           lucide="SendIcon"
                           hugeicons="SentIcon"
                           tabler="IconSend"
+                          phosphor="PaperPlaneTiltIcon"
                         />
                       </InputGroupButton>
                     </TooltipTrigger>
@@ -669,6 +693,7 @@ function Navbar() {
                 lucide="MenuIcon"
                 hugeicons="Menu09Icon"
                 tabler="IconMenu"
+                phosphor="ListIcon"
               />
               <span className="sr-only">Open menu</span>
             </Button>
@@ -682,6 +707,7 @@ function Navbar() {
                     lucide="XIcon"
                     tabler="IconX"
                     hugeicons="Cancel01Icon"
+                    phosphor="XIcon"
                   />
                   <span className="sr-only">Close</span>
                 </Button>
@@ -696,6 +722,7 @@ function Navbar() {
                         lucide="HomeIcon"
                         tabler="IconHome"
                         hugeicons="HomeIcon"
+                        phosphor="HouseIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -710,6 +737,7 @@ function Navbar() {
                         lucide="CircleIcon"
                         tabler="IconCircle"
                         hugeicons="CircleIcon"
+                        phosphor="CircleIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -724,6 +752,7 @@ function Navbar() {
                         lucide="GitBranchIcon"
                         tabler="IconGitBranch"
                         hugeicons="GitBranchIcon"
+                        phosphor="GitBranchIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -738,6 +767,7 @@ function Navbar() {
                         lucide="LayoutGridIcon"
                         tabler="IconLayoutGrid"
                         hugeicons="GridIcon"
+                        phosphor="GridFourIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -752,6 +782,7 @@ function Navbar() {
                         lucide="MailIcon"
                         tabler="IconMail"
                         hugeicons="MailIcon"
+                        phosphor="EnvelopeIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -766,6 +797,7 @@ function Navbar() {
                         lucide="ServerIcon"
                         tabler="IconServer"
                         hugeicons="ServerStackIcon"
+                        phosphor="HardDrivesIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -780,6 +812,7 @@ function Navbar() {
                         lucide="BotIcon"
                         tabler="IconRobot"
                         hugeicons="RoboticIcon"
+                        phosphor="RobotIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -794,6 +827,7 @@ function Navbar() {
                         lucide="SparklesIcon"
                         tabler="IconSparkles"
                         hugeicons="SparklesIcon"
+                        phosphor="SparkleIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -809,6 +843,7 @@ function Navbar() {
                         lucide="SearchIcon"
                         tabler="IconSearch"
                         hugeicons="SearchIcon"
+                        phosphor="MagnifyingGlassIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -823,6 +858,7 @@ function Navbar() {
                         lucide="ShoppingBagIcon"
                         tabler="IconShoppingBag"
                         hugeicons="ShoppingBasket01Icon"
+                        phosphor="BagIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -837,6 +873,7 @@ function Navbar() {
                         lucide="LinkIcon"
                         tabler="IconLink"
                         hugeicons="LinkIcon"
+                        phosphor="LinkIcon"
                       />
                     </ItemMedia>
                     <ItemContent>
@@ -890,6 +927,7 @@ function Navbar() {
                   lucide="SmileIcon"
                   tabler="IconMoodSmile"
                   hugeicons="SmileIcon"
+                  phosphor="SmileyIcon"
                 />
                 Set status
               </DropdownMenuItem>
@@ -898,6 +936,7 @@ function Navbar() {
                   lucide="CircleAlertIcon"
                   tabler="IconExclamationCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="WarningCircleIcon"
                 />
                 Single sign-on
               </DropdownMenuItem>
@@ -909,6 +948,7 @@ function Navbar() {
                   lucide="UserIcon"
                   tabler="IconUser"
                   hugeicons="UserIcon"
+                  phosphor="UserIcon"
                 />
                 Profile
               </DropdownMenuItem>
@@ -917,6 +957,7 @@ function Navbar() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Repositories
               </DropdownMenuItem>
@@ -925,6 +966,7 @@ function Navbar() {
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                 />
                 Stars
               </DropdownMenuItem>
@@ -933,6 +975,7 @@ function Navbar() {
                   lucide="CodeIcon"
                   tabler="IconCode"
                   hugeicons="CodeIcon"
+                  phosphor="CodeIcon"
                 />
                 Gists
               </DropdownMenuItem>
@@ -941,6 +984,7 @@ function Navbar() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Organizations
               </DropdownMenuItem>
@@ -949,6 +993,7 @@ function Navbar() {
                   lucide="ServerIcon"
                   tabler="IconServer"
                   hugeicons="ServerStackIcon"
+                  phosphor="HardDrivesIcon"
                 />
                 Enterprises
               </DropdownMenuItem>
@@ -957,6 +1002,7 @@ function Navbar() {
                   lucide="HeartIcon"
                   tabler="IconHeart"
                   hugeicons="FavouriteIcon"
+                  phosphor="HeartIcon"
                 />
                 Sponsors
               </DropdownMenuItem>
@@ -968,6 +1014,7 @@ function Navbar() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="SettingsIcon"
+                  phosphor="GearIcon"
                 />
                 Settings
               </DropdownMenuItem>
@@ -976,6 +1023,7 @@ function Navbar() {
                   lucide="BotIcon"
                   tabler="IconRobot"
                   hugeicons="RoboticIcon"
+                  phosphor="RobotIcon"
                 />
                 Copilot settings
               </DropdownMenuItem>
@@ -984,6 +1032,7 @@ function Navbar() {
                   lucide="SparklesIcon"
                   tabler="IconSparkles"
                   hugeicons="SparklesIcon"
+                  phosphor="SparkleIcon"
                 />
                 Feature preview
               </DropdownMenuItem>
@@ -992,6 +1041,7 @@ function Navbar() {
                   lucide="MonitorIcon"
                   tabler="IconDeviceDesktop"
                   hugeicons="ComputerIcon"
+                  phosphor="MonitorIcon"
                 />
                 Appearance
               </DropdownMenuItem>
@@ -1000,6 +1050,7 @@ function Navbar() {
                   lucide="UserIcon"
                   tabler="IconUser"
                   hugeicons="UserIcon"
+                  phosphor="UserIcon"
                 />
                 Accessibility
               </DropdownMenuItem>
@@ -1008,6 +1059,7 @@ function Navbar() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUpIcon"
+                  phosphor="ArrowUpIcon"
                 />
                 Upgrade
               </DropdownMenuItem>
@@ -1018,6 +1070,7 @@ function Navbar() {
                 lucide="LogOutIcon"
                 tabler="IconLogout"
                 hugeicons="LogoutIcon"
+                phosphor="SignOutIcon"
               />
               Sign out
             </DropdownMenuItem>
@@ -1224,6 +1277,7 @@ function AssignIssue() {
                     lucide="PlusIcon"
                     tabler="IconPlus"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                 </Button>
               </TooltipTrigger>
diff --git a/apps/v4/registry/bases/radix/blocks/preview.tsx b/apps/v4/registry/bases/radix/blocks/preview.tsx
index 0f38f4d49b..19e925bfcd 100644
--- a/apps/v4/registry/bases/radix/blocks/preview.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview.tsx
@@ -250,6 +250,7 @@ function FieldExamples() {
                   lucide="MinusIcon"
                   tabler="IconMinus"
                   hugeicons="MinusSignIcon"
+                  phosphor="MinusIcon"
                 />
               </Button>
               <Button
@@ -264,6 +265,7 @@ function FieldExamples() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               </Button>
             </ButtonGroup>
@@ -332,6 +334,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowLeftIcon"
                 tabler="IconArrowLeft"
                 hugeicons="ArrowLeft01Icon"
+                phosphor="ArrowLeftIcon"
               />
             </Button>
           </ButtonGroup>
@@ -358,6 +361,7 @@ function ButtonGroupExamples() {
                     lucide="ChevronDownIcon"
                     tabler="IconChevronDown"
                     hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
                   />
                 </Button>
               </DropdownMenuTrigger>
@@ -368,6 +372,7 @@ function ButtonGroupExamples() {
                       lucide="MailCheckIcon"
                       tabler="IconMailCheck"
                       hugeicons="MailValidation01Icon"
+                      phosphor="EnvelopeIcon"
                     />
                     Mark as Read
                   </DropdownMenuItem>
@@ -376,6 +381,7 @@ function ButtonGroupExamples() {
                       lucide="ArchiveIcon"
                       tabler="IconArchive"
                       hugeicons="ArchiveIcon"
+                      phosphor="ArchiveIcon"
                     />
                     Archive
                   </DropdownMenuItem>
@@ -387,6 +393,7 @@ function ButtonGroupExamples() {
                       lucide="ClockIcon"
                       tabler="IconClock"
                       hugeicons="ClockIcon"
+                      phosphor="ClockIcon"
                     />
                     Snooze
                   </DropdownMenuItem>
@@ -395,6 +402,7 @@ function ButtonGroupExamples() {
                       lucide="CalendarPlusIcon"
                       tabler="IconCalendarPlus"
                       hugeicons="CalendarAdd01Icon"
+                      phosphor="CalendarPlusIcon"
                     />
                     Add to Calendar
                   </DropdownMenuItem>
@@ -403,6 +411,7 @@ function ButtonGroupExamples() {
                       lucide="ListFilterIcon"
                       tabler="IconFilterPlus"
                       hugeicons="AddToListIcon"
+                      phosphor="ListPlusIcon"
                     />
                     Add to List
                   </DropdownMenuItem>
@@ -412,6 +421,7 @@ function ButtonGroupExamples() {
                         lucide="TagIcon"
                         tabler="IconTag"
                         hugeicons="TagIcon"
+                        phosphor="TagIcon"
                       />
                       Label As...
                     </DropdownMenuSubTrigger>
@@ -440,6 +450,7 @@ function ButtonGroupExamples() {
                       lucide="Trash2Icon"
                       tabler="IconTrash"
                       hugeicons="Delete02Icon"
+                      phosphor="TrashIcon"
                     />
                     Trash
                   </DropdownMenuItem>
@@ -453,6 +464,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowLeftIcon"
                 tabler="IconArrowLeft"
                 hugeicons="ArrowLeft01Icon"
+                phosphor="ArrowLeftIcon"
               />
             </Button>
             <Button variant="outline" size="icon-sm" aria-label="Next">
@@ -460,6 +472,7 @@ function ButtonGroupExamples() {
                 lucide="ArrowRightIcon"
                 tabler="IconArrowRight"
                 hugeicons="ArrowRight01Icon"
+                phosphor="ArrowRightIcon"
               />
             </Button>
           </ButtonGroup>
@@ -482,6 +495,7 @@ function ButtonGroupExamples() {
                       lucide="ChevronDownIcon"
                       tabler="IconChevronDown"
                       hugeicons="ArrowDown01Icon"
+                      phosphor="CaretDownIcon"
                     />
                   </Button>
                 </DropdownMenuTrigger>
@@ -493,6 +507,7 @@ function ButtonGroupExamples() {
                         lucide="VolumeX"
                         tabler="IconVolume"
                         hugeicons="VolumeOffIcon"
+                        phosphor="SpeakerSlashIcon"
                       />
                       Mute Conversation
                     </DropdownMenuItem>
@@ -501,6 +516,7 @@ function ButtonGroupExamples() {
                         lucide="CheckIcon"
                         tabler="IconCheck"
                         hugeicons="Tick02Icon"
+                        phosphor="CheckIcon"
                       />
                       Mark as Read
                     </DropdownMenuItem>
@@ -509,6 +525,7 @@ function ButtonGroupExamples() {
                         lucide="UserRoundXIcon"
                         tabler="IconUserX"
                         hugeicons="UserRemove01Icon"
+                        phosphor="UserMinusIcon"
                       />
                       Block User
                     </DropdownMenuItem>
@@ -521,6 +538,7 @@ function ButtonGroupExamples() {
                         lucide="ShareIcon"
                         tabler="IconShare"
                         hugeicons="Share03Icon"
+                        phosphor="ShareIcon"
                       />
                       Share Conversation
                     </DropdownMenuItem>
@@ -529,6 +547,7 @@ function ButtonGroupExamples() {
                         lucide="CopyIcon"
                         tabler="IconCopy"
                         hugeicons="Copy01Icon"
+                        phosphor="CopyIcon"
                       />
                       Copy Conversation
                     </DropdownMenuItem>
@@ -537,6 +556,7 @@ function ButtonGroupExamples() {
                         lucide="AlertTriangleIcon"
                         tabler="IconAlertTriangle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="WarningIcon"
                       />
                       Report Conversation
                     </DropdownMenuItem>
@@ -548,6 +568,7 @@ function ButtonGroupExamples() {
                         lucide="TrashIcon"
                         tabler="IconTrash"
                         hugeicons="Delete02Icon"
+                        phosphor="TrashIcon"
                       />
                       Delete Conversation
                     </DropdownMenuItem>
@@ -561,6 +582,7 @@ function ButtonGroupExamples() {
                   lucide="BotIcon"
                   tabler="IconRobot"
                   hugeicons="BotIcon"
+                  phosphor="RobotIcon"
                 />{" "}
                 Copilot
               </Button>
@@ -575,6 +597,7 @@ function ButtonGroupExamples() {
                       lucide="ChevronDownIcon"
                       tabler="IconChevronDown"
                       hugeicons="ArrowDown01Icon"
+                      phosphor="CaretDownIcon"
                     />
                   </Button>
                 </PopoverTrigger>
@@ -616,6 +639,7 @@ function InputGroupExamples() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
@@ -637,6 +661,7 @@ function InputGroupExamples() {
                     lucide="InfoIcon"
                     tabler="IconInfoCircle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="InfoIcon"
                   />
                 </InputGroupButton>
               </TooltipTrigger>
@@ -662,6 +687,7 @@ function InputGroupExamples() {
                       lucide="InfoIcon"
                       tabler="IconInfoCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="InfoIcon"
                     />
                   </InputGroupButton>
                 </InputGroupAddon>
@@ -690,6 +716,7 @@ function InputGroupExamples() {
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                   data-favorite={isFavorite}
                   className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
                 />
@@ -704,6 +731,7 @@ function InputGroupExamples() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </Button>
           </ButtonGroup>
@@ -732,6 +760,7 @@ function InputGroupExamples() {
                         lucide="AudioLinesIcon"
                         tabler="IconWaveSine"
                         hugeicons="AudioWave01Icon"
+                        phosphor="MicrophoneIcon"
                       />
                     </InputGroupButton>
                   </TooltipTrigger>
@@ -754,6 +783,7 @@ function InputGroupExamples() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </InputGroupButton>
             <DropdownMenu>
@@ -781,6 +811,7 @@ function InputGroupExamples() {
                 lucide="ArrowUpIcon"
                 tabler="IconArrowUp"
                 hugeicons="ArrowUp01Icon"
+                phosphor="ArrowUpIcon"
               />
               <span className="sr-only">Send</span>
             </InputGroupButton>
@@ -857,6 +888,7 @@ function EmptyAvatarGroup() {
                       lucide="BluetoothIcon"
                       tabler="IconBluetooth"
                       hugeicons="BluetoothIcon"
+                      phosphor="BluetoothIcon"
                     />
                   </AlertDialogMedia>
                   <AlertDialogTitle>
@@ -1053,6 +1085,7 @@ function SmallFormExample() {
                     lucide="MoreVerticalIcon"
                     tabler="IconDotsVertical"
                     hugeicons="MoreVerticalCircle01Icon"
+                    phosphor="DotsThreeVerticalIcon"
                   />
                   <span className="sr-only">More options</span>
                 </Button>
@@ -1068,6 +1101,7 @@ function SmallFormExample() {
                       lucide="FileIcon"
                       tabler="IconFile"
                       hugeicons="FileIcon"
+                      phosphor="FileIcon"
                     />
                     New File
                     <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -1077,6 +1111,7 @@ function SmallFormExample() {
                       lucide="FolderIcon"
                       tabler="IconFolder"
                       hugeicons="FolderIcon"
+                      phosphor="FolderIcon"
                     />
                     New Folder
                     <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -1087,6 +1122,7 @@ function SmallFormExample() {
                         lucide="FolderOpenIcon"
                         tabler="IconFolderOpen"
                         hugeicons="FolderOpenIcon"
+                        phosphor="FolderOpenIcon"
                       />
                       Open Recent
                     </DropdownMenuSubTrigger>
@@ -1099,6 +1135,7 @@ function SmallFormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Alpha
                           </DropdownMenuItem>
@@ -1107,6 +1144,7 @@ function SmallFormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Beta
                           </DropdownMenuItem>
@@ -1116,6 +1154,7 @@ function SmallFormExample() {
                                 lucide="MoreHorizontalIcon"
                                 tabler="IconDots"
                                 hugeicons="MoreHorizontalCircle01Icon"
+                                phosphor="DotsThreeOutlineIcon"
                               />
                               More Projects
                             </DropdownMenuSubTrigger>
@@ -1126,6 +1165,7 @@ function SmallFormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Gamma
                                 </DropdownMenuItem>
@@ -1134,6 +1174,7 @@ function SmallFormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Delta
                                 </DropdownMenuItem>
@@ -1148,6 +1189,7 @@ function SmallFormExample() {
                               lucide="FolderSearchIcon"
                               tabler="IconFolderSearch"
                               hugeicons="SearchIcon"
+                              phosphor="MagnifyingGlassIcon"
                             />
                             Browse...
                           </DropdownMenuItem>
@@ -1161,6 +1203,7 @@ function SmallFormExample() {
                       lucide="SaveIcon"
                       tabler="IconDeviceFloppy"
                       hugeicons="FloppyDiskIcon"
+                      phosphor="FloppyDiskIcon"
                     />
                     Save
                     <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -1170,6 +1213,7 @@ function SmallFormExample() {
                       lucide="DownloadIcon"
                       tabler="IconDownload"
                       hugeicons="DownloadIcon"
+                      phosphor="DownloadIcon"
                     />
                     Export
                     <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -1191,6 +1235,7 @@ function SmallFormExample() {
                       lucide="EyeIcon"
                       tabler="IconEye"
                       hugeicons="EyeIcon"
+                      phosphor="EyeIcon"
                     />
                     Show Sidebar
                   </DropdownMenuCheckboxItem>
@@ -1207,6 +1252,7 @@ function SmallFormExample() {
                       lucide="LayoutIcon"
                       tabler="IconLayout"
                       hugeicons="LayoutIcon"
+                      phosphor="LayoutIcon"
                     />
                     Show Status Bar
                   </DropdownMenuCheckboxItem>
@@ -1216,6 +1262,7 @@ function SmallFormExample() {
                         lucide="PaletteIcon"
                         tabler="IconPalette"
                         hugeicons="PaintBoardIcon"
+                        phosphor="PaletteIcon"
                       />
                       Theme
                     </DropdownMenuSubTrigger>
@@ -1232,6 +1279,7 @@ function SmallFormExample() {
                                 lucide="SunIcon"
                                 tabler="IconSun"
                                 hugeicons="SunIcon"
+                                phosphor="SunIcon"
                               />
                               Light
                             </DropdownMenuRadioItem>
@@ -1240,6 +1288,7 @@ function SmallFormExample() {
                                 lucide="MoonIcon"
                                 tabler="IconMoon"
                                 hugeicons="MoonIcon"
+                                phosphor="MoonIcon"
                               />
                               Dark
                             </DropdownMenuRadioItem>
@@ -1248,6 +1297,7 @@ function SmallFormExample() {
                                 lucide="MonitorIcon"
                                 tabler="IconDeviceDesktop"
                                 hugeicons="ComputerIcon"
+                                phosphor="MonitorIcon"
                               />
                               System
                             </DropdownMenuRadioItem>
@@ -1264,6 +1314,7 @@ function SmallFormExample() {
                       lucide="HelpCircleIcon"
                       tabler="IconHelpCircle"
                       hugeicons="HelpCircleIcon"
+                      phosphor="QuestionIcon"
                     />
                     Help & Support
                   </DropdownMenuItem>
@@ -1272,6 +1323,7 @@ function SmallFormExample() {
                       lucide="FileTextIcon"
                       tabler="IconFileText"
                       hugeicons="File01Icon"
+                      phosphor="FileTextIcon"
                     />
                     Documentation
                   </DropdownMenuItem>
@@ -1283,6 +1335,7 @@ function SmallFormExample() {
                       lucide="LogOutIcon"
                       tabler="IconLogout"
                       hugeicons="LogoutIcon"
+                      phosphor="SignOutIcon"
                     />
                     Sign Out
                     <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
@@ -1390,6 +1443,7 @@ function ObservabilityCard() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-end"
             />
           </Button>
@@ -1453,6 +1507,7 @@ function ItemExample() {
                 lucide="ShoppingBagIcon"
                 tabler="IconShoppingBag"
                 hugeicons="ShoppingBasket01Icon"
+                phosphor="BagIcon"
               />
             </ItemMedia>
             <ItemContent>
diff --git a/apps/v4/registry/bases/radix/blocks/vercel.tsx b/apps/v4/registry/bases/radix/blocks/vercel.tsx
index 18e0b1223c..b23b1bc100 100644
--- a/apps/v4/registry/bases/radix/blocks/vercel.tsx
+++ b/apps/v4/registry/bases/radix/blocks/vercel.tsx
@@ -262,6 +262,7 @@ function DeploymentFilter() {
                 lucide="CalendarIcon"
                 tabler="IconCalendar"
                 hugeicons="Calendar01Icon"
+                phosphor="CalendarIcon"
                 data-icon="inline-start"
                 className="text-muted-foreground"
               />
@@ -295,6 +296,7 @@ function DeploymentFilter() {
               lucide="Search"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupInput placeholder="All Authors..." />
@@ -303,6 +305,7 @@ function DeploymentFilter() {
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDown01Icon"
+              phosphor="CaretDownIcon"
               className="text-muted-foreground"
             />
           </InputGroupAddon>
@@ -315,6 +318,7 @@ function DeploymentFilter() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDown01Icon"
+                phosphor="CaretDownIcon"
                 data-icon="inline-end"
                 className="text-muted-foreground"
               />
@@ -332,6 +336,7 @@ function DeploymentFilter() {
                   lucide="CheckIcon"
                   tabler="IconCheck"
                   hugeicons="Tick02Icon"
+                  phosphor="CheckIcon"
                   className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
                 />
               </DropdownMenuItem>
@@ -360,6 +365,7 @@ function DeploymentFilter() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDown01Icon"
+                phosphor="CaretDownIcon"
                 data-icon="inline-end"
                 className="text-muted-foreground ml-auto"
               />
@@ -387,6 +393,7 @@ function DeploymentFilter() {
                     lucide="CheckIcon"
                     tabler="IconCheck"
                     hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
                     className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
                   />
                 </DropdownMenuItem>
@@ -462,6 +469,7 @@ function BillingList() {
                         lucide="MoreHorizontalIcon"
                         tabler="IconDots"
                         hugeicons="MoreHorizontalCircle01Icon"
+                        phosphor="DotsThreeOutlineIcon"
                       />
                       <span className="sr-only">More options</span>
                     </Button>
@@ -604,6 +612,7 @@ function ActivateAgentDialog() {
                       lucide="CheckCircle2Icon"
                       tabler="IconCircleCheckFilled"
                       hugeicons="CheckmarkCircle02Icon"
+                      phosphor="CheckCircleIcon"
                       className="fill-primary text-primary-foreground size-5"
                     />
                   </ItemMedia>
@@ -620,6 +629,7 @@ function ActivateAgentDialog() {
                 lucide="CircleDollarSignIcon"
                 hugeicons="DollarCircleIcon"
                 tabler="IconCoin"
+                phosphor="CurrencyCircleDollarIcon"
               />
               <AlertDescription>
                 Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
@@ -664,6 +674,7 @@ function ObservabilityCard() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-end"
             />
           </Button>
diff --git a/apps/v4/registry/bases/radix/examples/accordion-example.tsx b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
index b803d6b7ae..e16af72377 100644
--- a/apps/v4/registry/bases/radix/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
@@ -179,6 +179,7 @@ function AccordionInCard() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRight01Icon"
+              phosphor="ArrowUpRightIcon"
             />
           </Button>
         </>
diff --git a/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx b/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx
index 75b962be57..905528121a 100644
--- a/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx
@@ -102,6 +102,7 @@ function AlertDialogWithMedia() {
                 lucide="BluetoothIcon"
                 tabler="IconBluetooth"
                 hugeicons="BluetoothIcon"
+                phosphor="BluetoothIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
@@ -134,6 +135,7 @@ function AlertDialogSmallWithMedia() {
                 lucide="BluetoothIcon"
                 tabler="IconBluetooth"
                 hugeicons="BluetoothIcon"
+                phosphor="BluetoothIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
@@ -165,6 +167,7 @@ function AlertDialogDestructive() {
                 lucide="Trash2Icon"
                 tabler="IconTrash"
                 hugeicons="Delete02Icon"
+                phosphor="TrashIcon"
               />
             </AlertDialogMedia>
             <AlertDialogTitle>Delete chat?</AlertDialogTitle>
diff --git a/apps/v4/registry/bases/radix/examples/alert-example.tsx b/apps/v4/registry/bases/radix/examples/alert-example.tsx
index a04098c544..4549b07ce0 100644
--- a/apps/v4/registry/bases/radix/examples/alert-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/alert-example.tsx
@@ -55,6 +55,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             Let&apos;s try one with icon, title and a <a href="#">link</a>.
@@ -65,6 +66,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertDescription>
             This one has an icon and a description only. No title.{" "}
@@ -77,6 +79,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Success! Your changes have been saved</AlertTitle>
           <AlertDescription>
@@ -88,6 +91,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             This is a very long alert title that demonstrates how the component
@@ -100,6 +104,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertDescription>
             This is a very long alert description that demonstrates how the
@@ -112,6 +117,7 @@ function AlertExample2() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>
             This is an extremely long alert title that spans multiple lines to
@@ -141,6 +147,7 @@ function AlertExample3() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Something went wrong!</AlertTitle>
           <AlertDescription>
@@ -152,6 +159,7 @@ function AlertExample3() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>Unable to process your payment.</AlertTitle>
           <AlertDescription>
@@ -180,6 +188,7 @@ function AlertExample4() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
           <AlertAction>
@@ -191,6 +200,7 @@ function AlertExample4() {
             lucide="CircleAlertIcon"
             tabler="IconExclamationCircle"
             hugeicons="AlertCircleIcon"
+            phosphor="WarningCircleIcon"
           />
           <AlertTitle>The selected emails have been marked as spam.</AlertTitle>
           <AlertDescription>
diff --git a/apps/v4/registry/bases/radix/examples/avatar-example.tsx b/apps/v4/registry/bases/radix/examples/avatar-example.tsx
index c1073a4aa1..c96ef62800 100644
--- a/apps/v4/registry/bases/radix/examples/avatar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/avatar-example.tsx
@@ -129,6 +129,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -143,6 +144,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -157,6 +159,7 @@ function AvatarWithBadgeIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -169,6 +172,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -179,6 +183,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -189,6 +194,7 @@ function AvatarWithBadgeIcon() {
               lucide="CheckIcon"
               tabler="IconCheck"
               hugeicons="Tick02Icon"
+              phosphor="CheckIcon"
             />
           </AvatarBadge>
         </Avatar>
@@ -361,6 +367,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -388,6 +395,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -421,6 +429,7 @@ function AvatarGroupWithIconCount() {
             lucide="PlusIcon"
             tabler="IconPlus"
             hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
           />
         </AvatarGroupCount>
       </AvatarGroup>
@@ -464,6 +473,7 @@ function AvatarInEmpty() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                 />
               </AvatarGroupCount>
             </AvatarGroup>
@@ -479,6 +489,7 @@ function AvatarInEmpty() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
             Invite Members
           </Button>
diff --git a/apps/v4/registry/bases/radix/examples/badge-example.tsx b/apps/v4/registry/bases/radix/examples/badge-example.tsx
index e30a85896d..b499da089e 100644
--- a/apps/v4/registry/bases/radix/examples/badge-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/badge-example.tsx
@@ -44,6 +44,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Default
@@ -53,6 +54,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Secondary
@@ -62,6 +64,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Destructive
@@ -71,6 +74,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Outline
@@ -80,6 +84,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Ghost
@@ -89,6 +94,7 @@ function BadgeWithIconLeft() {
             lucide="BadgeCheck"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadge02Icon"
+            phosphor="CheckCircleIcon"
             data-icon="inline-start"
           />
           Link
@@ -108,6 +114,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -117,6 +124,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -126,6 +134,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -135,6 +144,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -144,6 +154,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -153,6 +164,7 @@ function BadgeWithIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Badge>
@@ -205,6 +217,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRightIcon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
@@ -216,6 +229,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRightIcon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
@@ -227,6 +241,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRightIcon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
@@ -238,6 +253,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowUpRightIcon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
@@ -249,6 +265,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
@@ -260,6 +277,7 @@ function BadgeAsLink() {
               lucide="ArrowUpRightIcon"
               tabler="IconArrowUpRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowUpRightIcon"
               data-icon="inline-end"
             />
           </a>
diff --git a/apps/v4/registry/bases/radix/examples/button-example.tsx b/apps/v4/registry/bases/radix/examples/button-example.tsx
index 97650e4fbf..d228fb8b5c 100644
--- a/apps/v4/registry/bases/radix/examples/button-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/button-example.tsx
@@ -97,6 +97,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -106,6 +107,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -115,6 +117,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -124,6 +127,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -133,6 +137,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -142,6 +147,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -153,6 +159,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -162,6 +169,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -171,6 +179,8 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
+            data-icon="inline-end"
           />
         </Button>
         <Button size="sm" variant="ghost">
@@ -179,6 +189,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -188,6 +199,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -197,6 +209,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -208,6 +221,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -217,6 +231,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -226,6 +241,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -235,6 +251,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -244,6 +261,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -253,6 +271,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -264,6 +283,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -273,6 +293,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -282,6 +303,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -291,6 +313,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -300,6 +323,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -309,6 +333,7 @@ function ButtonIconRight() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -326,6 +351,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -335,6 +361,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -344,6 +371,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -353,6 +381,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -362,6 +391,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -371,6 +401,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -382,6 +413,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -391,6 +423,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -400,6 +433,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -409,6 +443,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -418,6 +453,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -427,6 +463,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -438,6 +475,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -447,6 +485,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -456,6 +495,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -465,6 +505,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -474,6 +515,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -483,6 +525,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -494,6 +537,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Default
@@ -503,6 +547,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Secondary
@@ -512,6 +557,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Outline
@@ -521,6 +567,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Ghost
@@ -530,6 +577,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Destructive
@@ -539,6 +587,7 @@ function ButtonIconLeft() {
             lucide="ArrowLeftCircleIcon"
             hugeicons="CircleArrowLeft02Icon"
             tabler="IconCircleArrowLeft"
+            phosphor="ArrowCircleLeftIcon"
             data-icon="inline-start"
           />{" "}
           Link
@@ -557,6 +606,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="secondary">
@@ -564,6 +614,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="outline">
@@ -571,6 +622,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="ghost">
@@ -578,6 +630,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="destructive">
@@ -585,6 +638,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-xs" variant="link">
@@ -592,6 +646,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -601,6 +656,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="secondary">
@@ -608,6 +664,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="outline">
@@ -615,6 +672,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="ghost">
@@ -622,6 +680,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="destructive">
@@ -629,6 +688,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-sm" variant="link">
@@ -636,6 +696,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -645,6 +706,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="secondary">
@@ -652,6 +714,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="outline">
@@ -659,6 +722,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="ghost">
@@ -666,6 +730,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="destructive">
@@ -673,6 +738,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon" variant="link">
@@ -680,6 +746,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -689,6 +756,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="secondary">
@@ -696,6 +764,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="outline">
@@ -703,6 +772,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="ghost">
@@ -710,6 +780,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="destructive">
@@ -717,6 +788,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
         <Button size="icon-lg" variant="link">
@@ -724,6 +796,7 @@ function ButtonIconOnly() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight02Icon"
+            phosphor="ArrowRightIcon"
           />
         </Button>
       </div>
@@ -743,6 +816,7 @@ function ButtonExamples() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
               data-icon="inline-end"
             />
           </Button>
@@ -754,6 +828,7 @@ function ButtonExamples() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight02Icon"
+              phosphor="ArrowRightIcon"
               data-icon="inline-end"
             />
           </Button>
diff --git a/apps/v4/registry/bases/radix/examples/button-group-example.tsx b/apps/v4/registry/bases/radix/examples/button-group-example.tsx
index 6fd27c1441..f94ba1e10f 100644
--- a/apps/v4/registry/bases/radix/examples/button-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/button-group-example.tsx
@@ -127,6 +127,7 @@ function ButtonGroupWithDropdown() {
                   lucide="ChevronDownIcon"
                   tabler="IconChevronDown"
                   hugeicons="ArrowDown01Icon"
+                  phosphor="CaretDownIcon"
                 />
               </Button>
             </DropdownMenuTrigger>
@@ -147,6 +148,7 @@ function ButtonGroupWithDropdown() {
                   lucide="ChevronDownIcon"
                   tabler="IconChevronDown"
                   hugeicons="ArrowDown01Icon"
+                  phosphor="CaretDownIcon"
                 />
               </Button>
             </DropdownMenuTrigger>
@@ -157,6 +159,7 @@ function ButtonGroupWithDropdown() {
                     lucide="VolumeOffIcon"
                     tabler="IconVolume"
                     hugeicons="VolumeOffIcon"
+                    phosphor="SpeakerSlashIcon"
                   />
                   Mute Conversation
                 </DropdownMenuItem>
@@ -165,6 +168,7 @@ function ButtonGroupWithDropdown() {
                     lucide="CheckIcon"
                     tabler="IconCheck"
                     hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
                   />
                   Mark as Read
                 </DropdownMenuItem>
@@ -173,6 +177,7 @@ function ButtonGroupWithDropdown() {
                     lucide="AlertTriangleIcon"
                     tabler="IconAlertTriangle"
                     hugeicons="AlertCircleIcon"
+                    phosphor="WarningIcon"
                   />
                   Report Conversation
                 </DropdownMenuItem>
@@ -181,6 +186,7 @@ function ButtonGroupWithDropdown() {
                     lucide="UserRoundXIcon"
                     tabler="IconUserX"
                     hugeicons="UserRemove01Icon"
+                    phosphor="UserMinusIcon"
                   />
                   Block User
                 </DropdownMenuItem>
@@ -189,6 +195,7 @@ function ButtonGroupWithDropdown() {
                     lucide="ShareIcon"
                     tabler="IconShare"
                     hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
                   />
                   Share Conversation
                 </DropdownMenuItem>
@@ -197,6 +204,7 @@ function ButtonGroupWithDropdown() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
                   />
                   Copy Conversation
                 </DropdownMenuItem>
@@ -208,6 +216,7 @@ function ButtonGroupWithDropdown() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
                   />
                   Delete Conversation
                 </DropdownMenuItem>
@@ -244,6 +253,7 @@ function ButtonGroupWithSelect() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -262,6 +272,7 @@ function ButtonGroupWithIcons() {
               lucide="FlipHorizontalIcon"
               tabler="IconFlipHorizontal"
               hugeicons="FlipHorizontalIcon"
+              phosphor="ArrowsHorizontalIcon"
             />
           </Button>
           <Button variant="outline">
@@ -269,6 +280,7 @@ function ButtonGroupWithIcons() {
               lucide="FlipVerticalIcon"
               tabler="IconFlipVertical"
               hugeicons="FlipVerticalIcon"
+              phosphor="ArrowsVerticalIcon"
             />
           </Button>
           <Button variant="outline">
@@ -276,6 +288,7 @@ function ButtonGroupWithIcons() {
               lucide="RotateCwIcon"
               tabler="IconRotateClockwise2"
               hugeicons="Rotate01Icon"
+              phosphor="ArrowClockwiseIcon"
             />
           </Button>
         </ButtonGroup>
@@ -298,6 +311,7 @@ function ButtonGroupWithInputGroup() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
         </InputGroup>
@@ -330,6 +344,7 @@ function ButtonGroupWithFields() {
                 lucide="MinusIcon"
                 tabler="IconMinus"
                 hugeicons="MinusSignIcon"
+                phosphor="MinusIcon"
               />
             </Button>
             <Button variant="outline" size="icon">
@@ -337,6 +352,7 @@ function ButtonGroupWithFields() {
                 lucide="PlusIcon"
                 tabler="IconPlus"
                 hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
               />
             </Button>
           </ButtonGroup>
@@ -355,6 +371,7 @@ function ButtonGroupWithLike() {
             lucide="HeartIcon"
             tabler="IconBell"
             hugeicons="Notification02Icon"
+            phosphor="HeartIcon"
             data-icon="inline-start"
           />{" "}
           Like
@@ -397,6 +414,7 @@ function ButtonGroupNested() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </Button>
         </ButtonGroup>
@@ -410,6 +428,7 @@ function ButtonGroupNested() {
                     lucide="AudioLinesIcon"
                     tabler="IconHeadphones"
                     hugeicons="AudioWave01Icon"
+                    phosphor="MicrophoneIcon"
                   />
                 </InputGroupAddon>
               </TooltipTrigger>
@@ -431,6 +450,7 @@ function ButtonGroupPagination() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
             data-icon="inline-start"
           />
           Previous
@@ -456,6 +476,7 @@ function ButtonGroupPagination() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight01Icon"
+            phosphor="ArrowRightIcon"
             data-icon="inline-end"
           />
         </Button>
@@ -491,6 +512,7 @@ function ButtonGroupPaginationSplit() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
           <Button variant="outline" size="icon-xs">
@@ -498,6 +520,7 @@ function ButtonGroupPaginationSplit() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -516,6 +539,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
           <Button variant="outline">
@@ -523,6 +547,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowRightIcon"
               tabler="IconArrowRight"
               hugeicons="ArrowRight01Icon"
+              phosphor="ArrowRightIcon"
             />
           </Button>
         </ButtonGroup>
@@ -532,6 +557,7 @@ function ButtonGroupNavigation() {
               lucide="ArrowLeftIcon"
               tabler="IconArrowLeft"
               hugeicons="ArrowLeft01Icon"
+              phosphor="ArrowLeftIcon"
             />
           </Button>
         </ButtonGroup>
@@ -578,6 +604,7 @@ function ButtonGroupVertical() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -585,6 +612,7 @@ function ButtonGroupVertical() {
               lucide="MinusIcon"
               tabler="IconMinus"
               hugeicons="MinusSignIcon"
+              phosphor="MinusIcon"
             />
           </Button>
         </ButtonGroup>
@@ -603,6 +631,7 @@ function ButtonGroupVerticalNested() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="Search01Icon"
+              phosphor="MagnifyingGlassIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -610,6 +639,7 @@ function ButtonGroupVerticalNested() {
               lucide="CopyIcon"
               tabler="IconCopy"
               hugeicons="Copy01Icon"
+              phosphor="CopyIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -617,6 +647,7 @@ function ButtonGroupVerticalNested() {
               lucide="ShareIcon"
               tabler="IconShare"
               hugeicons="Share03Icon"
+              phosphor="ShareIcon"
             />
           </Button>
         </ButtonGroup>
@@ -626,6 +657,7 @@ function ButtonGroupVerticalNested() {
               lucide="FlipHorizontalIcon"
               tabler="IconFlipHorizontal"
               hugeicons="FlipHorizontalIcon"
+              phosphor="ArrowsHorizontalIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -633,6 +665,7 @@ function ButtonGroupVerticalNested() {
               lucide="FlipVerticalIcon"
               tabler="IconFlipVertical"
               hugeicons="FlipVerticalIcon"
+              phosphor="ArrowsVerticalIcon"
             />
           </Button>
           <Button variant="outline" size="icon">
@@ -640,6 +673,7 @@ function ButtonGroupVerticalNested() {
               lucide="RotateCwIcon"
               tabler="IconRotateClockwise2"
               hugeicons="Rotate01Icon"
+              phosphor="ArrowClockwiseIcon"
             />
           </Button>
         </ButtonGroup>
@@ -649,6 +683,7 @@ function ButtonGroupVerticalNested() {
               lucide="TrashIcon"
               tabler="IconTrash"
               hugeicons="Delete02Icon"
+              phosphor="TrashIcon"
             />
           </Button>
         </ButtonGroup>
diff --git a/apps/v4/registry/bases/radix/examples/calendar-example.tsx b/apps/v4/registry/bases/radix/examples/calendar-example.tsx
index 73c1136f00..78572a00e1 100644
--- a/apps/v4/registry/bases/radix/examples/calendar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/calendar-example.tsx
@@ -200,6 +200,7 @@ function CalendarWithTime() {
                     lucide="Clock2Icon"
                     tabler="IconClockHour2"
                     hugeicons="Clock03Icon"
+                    phosphor="ClockIcon"
                     className="text-muted-foreground"
                   />
                 </InputGroupAddon>
@@ -220,6 +221,7 @@ function CalendarWithTime() {
                     lucide="Clock2Icon"
                     tabler="IconClockHour2"
                     hugeicons="Clock03Icon"
+                    phosphor="ClockIcon"
                     className="text-muted-foreground"
                   />
                 </InputGroupAddon>
@@ -347,6 +349,7 @@ function DatePickerSimple() {
                 lucide="CalendarIcon"
                 tabler="IconCalendar"
                 hugeicons="CalendarIcon"
+                phosphor="CalendarBlankIcon"
                 data-icon="inline-start"
               />
               {date ? format(date, "PPP") : <span>Pick a date</span>}
@@ -382,6 +385,7 @@ function DatePickerWithRange() {
                 lucide="CalendarIcon"
                 tabler="IconCalendar"
                 hugeicons="CalendarIcon"
+                phosphor="CalendarBlankIcon"
                 data-icon="inline-start"
               />
               {date?.from ? (
@@ -435,6 +439,7 @@ function DataPickerWithDropdowns() {
                 lucide="ChevronDownIcon"
                 tabler="IconChevronDown"
                 hugeicons="ArrowDownIcon"
+                phosphor="CaretDownIcon"
                 data-icon="inline-start"
                 className="ml-auto"
               />
diff --git a/apps/v4/registry/bases/radix/examples/card-example.tsx b/apps/v4/registry/bases/radix/examples/card-example.tsx
index 5186f1d383..84fdd66c41 100644
--- a/apps/v4/registry/bases/radix/examples/card-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/card-example.tsx
@@ -113,6 +113,7 @@ function CardMeetingNotes() {
                 lucide="CaptionsIcon"
                 tabler="IconTextCaption"
                 hugeicons="TextCheckIcon"
+                phosphor="TextTIcon"
                 data-icon="inline-start"
               />
               Transcribe
@@ -183,6 +184,7 @@ function CardWithImage() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="Add01Icon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             Button
@@ -216,6 +218,7 @@ function CardWithImageSmall() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="Add01Icon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             Button
diff --git a/apps/v4/registry/bases/radix/examples/chart-example.tsx b/apps/v4/registry/bases/radix/examples/chart-example.tsx
index ecb1ea5198..5d889fb4b4 100644
--- a/apps/v4/registry/bases/radix/examples/chart-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/chart-example.tsx
@@ -121,6 +121,7 @@ function ChartAreaExample() {
                   lucide="TrendingUpIcon"
                   tabler="IconTrendingUp"
                   hugeicons="ChartUpIcon"
+                  phosphor="TrendUpIcon"
                   className="size-4"
                 />
               </div>
@@ -190,6 +191,7 @@ function ChartBarExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -275,6 +277,7 @@ function ChartLineExample() {
                   lucide="TrendingUpIcon"
                   tabler="IconTrendingUp"
                   hugeicons="ChartUpIcon"
+                  phosphor="TrendUpIcon"
                   className="size-4"
                 />
               </div>
@@ -392,6 +395,7 @@ function ChartPieExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -462,6 +466,7 @@ function ChartRadarExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
@@ -556,6 +561,7 @@ function ChartRadialExample() {
               lucide="TrendingUpIcon"
               tabler="IconTrendingUp"
               hugeicons="ChartUpIcon"
+              phosphor="TrendUpIcon"
               className="size-4"
             />
           </div>
diff --git a/apps/v4/registry/bases/radix/examples/collapsible-example.tsx b/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
index 17e7c0d1f6..2f03716dd8 100644
--- a/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
@@ -102,12 +102,14 @@ function CollapsibleFileTree() {
                 lucide="ChevronRightIcon"
                 tabler="IconChevronRight"
                 hugeicons="ArrowRight01Icon"
+                phosphor="CaretRightIcon"
                 className="transition-transform group-data-[state=open]:rotate-90"
               />
               <IconPlaceholder
                 lucide="FolderIcon"
                 tabler="IconFolder"
                 hugeicons="Folder01Icon"
+                phosphor="FolderIcon"
               />
               {fileItem.name}
             </Button>
@@ -131,6 +133,7 @@ function CollapsibleFileTree() {
           lucide="FileIcon"
           tabler="IconFile"
           hugeicons="File01Icon"
+          phosphor="FileIcon"
         />
         <span>{fileItem.name}</span>
       </Button>
@@ -211,12 +214,14 @@ function CollapsibleSettings() {
                     lucide="MinimizeIcon"
                     tabler="IconMinimize"
                     hugeicons="MinusSignIcon"
+                    phosphor="MinusIcon"
                   />
                 ) : (
                   <IconPlaceholder
                     lucide="MaximizeIcon"
                     tabler="IconMaximize"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                 )}
               </Button>
diff --git a/apps/v4/registry/bases/radix/examples/combobox-example.tsx b/apps/v4/registry/bases/radix/examples/combobox-example.tsx
index bd7de12fab..d077e5c375 100644
--- a/apps/v4/registry/bases/radix/examples/combobox-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/combobox-example.tsx
@@ -810,6 +810,7 @@ function ComboxboxInputAddon() {
               lucide="GlobeIcon"
               tabler="IconGlobe"
               hugeicons="Globe02Icon"
+              phosphor="GlobeIcon"
             />
           </InputGroupAddon>
         </ComboboxInput>
@@ -1198,6 +1199,7 @@ function ComboboxWithOtherInputs() {
           lucide="ChevronDownIcon"
           tabler="IconSelector"
           hugeicons="UnfoldMoreIcon"
+          phosphor="CaretDownIcon"
         />
       </Button>
       <Input placeholder="Select a framework" className="w-52" />
@@ -1208,6 +1210,7 @@ function ComboboxWithOtherInputs() {
             lucide="ChevronDownIcon"
             tabler="IconSelector"
             hugeicons="UnfoldMoreIcon"
+            phosphor="CaretDownIcon"
           />
         </InputGroupAddon>
       </InputGroup>
diff --git a/apps/v4/registry/bases/radix/examples/command-example.tsx b/apps/v4/registry/bases/radix/examples/command-example.tsx
index 97b5cc09c7..bdc8bae0cf 100644
--- a/apps/v4/registry/bases/radix/examples/command-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/command-example.tsx
@@ -86,6 +86,7 @@ function CommandWithShortcuts() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -95,6 +96,7 @@ function CommandWithShortcuts() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -104,6 +106,7 @@ function CommandWithShortcuts() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -141,6 +144,7 @@ function CommandWithGroups() {
                     lucide="CalendarIcon"
                     tabler="IconCalendar"
                     hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
                   />
                   <span>Calendar</span>
                 </CommandItem>
@@ -149,6 +153,7 @@ function CommandWithGroups() {
                     lucide="SmileIcon"
                     tabler="IconMoodSmile"
                     hugeicons="SmileIcon"
+                    phosphor="SmileyIcon"
                   />
                   <span>Search Emoji</span>
                 </CommandItem>
@@ -157,6 +162,7 @@ function CommandWithGroups() {
                     lucide="CalculatorIcon"
                     tabler="IconCalculator"
                     hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
                   />
                   <span>Calculator</span>
                 </CommandItem>
@@ -168,6 +174,7 @@ function CommandWithGroups() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -177,6 +184,7 @@ function CommandWithGroups() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -186,6 +194,7 @@ function CommandWithGroups() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -223,6 +232,7 @@ function CommandManyItems() {
                     lucide="HomeIcon"
                     tabler="IconHome"
                     hugeicons="HomeIcon"
+                    phosphor="HouseIcon"
                   />
                   <span>Home</span>
                   <CommandShortcut>⌘H</CommandShortcut>
@@ -232,6 +242,7 @@ function CommandManyItems() {
                     lucide="InboxIcon"
                     tabler="IconInbox"
                     hugeicons="InboxIcon"
+                    phosphor="TrayIcon"
                   />
                   <span>Inbox</span>
                   <CommandShortcut>⌘I</CommandShortcut>
@@ -241,6 +252,7 @@ function CommandManyItems() {
                     lucide="FileTextIcon"
                     tabler="IconFileText"
                     hugeicons="File02Icon"
+                    phosphor="FileTextIcon"
                   />
                   <span>Documents</span>
                   <CommandShortcut>⌘D</CommandShortcut>
@@ -250,6 +262,7 @@ function CommandManyItems() {
                     lucide="FolderIcon"
                     tabler="IconFolder"
                     hugeicons="FolderIcon"
+                    phosphor="FolderIcon"
                   />
                   <span>Folders</span>
                   <CommandShortcut>⌘F</CommandShortcut>
@@ -262,6 +275,7 @@ function CommandManyItems() {
                     lucide="PlusIcon"
                     tabler="IconPlus"
                     hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
                   />
                   <span>New File</span>
                   <CommandShortcut>⌘N</CommandShortcut>
@@ -271,6 +285,7 @@ function CommandManyItems() {
                     lucide="FolderPlusIcon"
                     tabler="IconFolderPlus"
                     hugeicons="FolderAddIcon"
+                    phosphor="FolderPlusIcon"
                   />
                   <span>New Folder</span>
                   <CommandShortcut>⇧⌘N</CommandShortcut>
@@ -280,6 +295,7 @@ function CommandManyItems() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   <span>Copy</span>
                   <CommandShortcut>⌘C</CommandShortcut>
@@ -289,6 +305,7 @@ function CommandManyItems() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   <span>Cut</span>
                   <CommandShortcut>⌘X</CommandShortcut>
@@ -298,6 +315,7 @@ function CommandManyItems() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   <span>Paste</span>
                   <CommandShortcut>⌘V</CommandShortcut>
@@ -307,6 +325,7 @@ function CommandManyItems() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   <span>Delete</span>
                   <CommandShortcut>⌫</CommandShortcut>
@@ -319,6 +338,7 @@ function CommandManyItems() {
                     lucide="LayoutGridIcon"
                     tabler="IconLayoutGrid"
                     hugeicons="GridIcon"
+                    phosphor="GridFourIcon"
                   />
                   <span>Grid View</span>
                 </CommandItem>
@@ -327,6 +347,7 @@ function CommandManyItems() {
                     lucide="ListIcon"
                     tabler="IconList"
                     hugeicons="Menu05Icon"
+                    phosphor="ListIcon"
                   />
                   <span>List View</span>
                 </CommandItem>
@@ -335,6 +356,7 @@ function CommandManyItems() {
                     lucide="ZoomInIcon"
                     tabler="IconZoomIn"
                     hugeicons="ZoomInAreaIcon"
+                    phosphor="MagnifyingGlassMinusIcon"
                   />
                   <span>Zoom In</span>
                   <CommandShortcut>⌘+</CommandShortcut>
@@ -344,6 +366,7 @@ function CommandManyItems() {
                     lucide="ZoomOutIcon"
                     tabler="IconZoomOut"
                     hugeicons="ZoomOutAreaIcon"
+                    phosphor="MagnifyingGlassPlusIcon"
                   />
                   <span>Zoom Out</span>
                   <CommandShortcut>⌘-</CommandShortcut>
@@ -356,6 +379,7 @@ function CommandManyItems() {
                     lucide="UserIcon"
                     tabler="IconUser"
                     hugeicons="UserIcon"
+                    phosphor="UserIcon"
                   />
                   <span>Profile</span>
                   <CommandShortcut>⌘P</CommandShortcut>
@@ -365,6 +389,7 @@ function CommandManyItems() {
                     lucide="CreditCardIcon"
                     tabler="IconCreditCard"
                     hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
                   />
                   <span>Billing</span>
                   <CommandShortcut>⌘B</CommandShortcut>
@@ -374,6 +399,7 @@ function CommandManyItems() {
                     lucide="SettingsIcon"
                     tabler="IconSettings"
                     hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
                   />
                   <span>Settings</span>
                   <CommandShortcut>⌘S</CommandShortcut>
@@ -383,6 +409,7 @@ function CommandManyItems() {
                     lucide="BellIcon"
                     tabler="IconBell"
                     hugeicons="NotificationIcon"
+                    phosphor="BellIcon"
                   />
                   <span>Notifications</span>
                 </CommandItem>
@@ -391,6 +418,7 @@ function CommandManyItems() {
                     lucide="HelpCircleIcon"
                     tabler="IconHelpCircle"
                     hugeicons="HelpCircleIcon"
+                    phosphor="QuestionIcon"
                   />
                   <span>Help & Support</span>
                 </CommandItem>
@@ -402,6 +430,7 @@ function CommandManyItems() {
                     lucide="CalculatorIcon"
                     tabler="IconCalculator"
                     hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
                   />
                   <span>Calculator</span>
                 </CommandItem>
@@ -410,6 +439,7 @@ function CommandManyItems() {
                     lucide="CalendarIcon"
                     tabler="IconCalendar"
                     hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
                   />
                   <span>Calendar</span>
                 </CommandItem>
@@ -418,6 +448,7 @@ function CommandManyItems() {
                     lucide="ImageIcon"
                     tabler="IconPhoto"
                     hugeicons="ImageIcon"
+                    phosphor="ImageIcon"
                   />
                   <span>Image Editor</span>
                 </CommandItem>
@@ -426,6 +457,7 @@ function CommandManyItems() {
                     lucide="CodeIcon"
                     tabler="IconCode"
                     hugeicons="CodeIcon"
+                    phosphor="CodeIcon"
                   />
                   <span>Code Editor</span>
                 </CommandItem>
diff --git a/apps/v4/registry/bases/radix/examples/component-example.tsx b/apps/v4/registry/bases/radix/examples/component-example.tsx
index ea0b820296..3f769a1a56 100644
--- a/apps/v4/registry/bases/radix/examples/component-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/component-example.tsx
@@ -103,6 +103,7 @@ function CardExample() {
                   lucide="PlusIcon"
                   tabler="IconPlus"
                   hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
                   data-icon="inline-start"
                 />
                 Show Dialog
@@ -115,6 +116,7 @@ function CardExample() {
                     lucide="BluetoothIcon"
                     tabler="IconBluetooth"
                     hugeicons="BluetoothIcon"
+                    phosphor="BluetoothIcon"
                   />
                 </AlertDialogMedia>
                 <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
@@ -168,6 +170,7 @@ function FormExample() {
                     lucide="MoreVerticalIcon"
                     tabler="IconDotsVertical"
                     hugeicons="MoreVerticalCircle01Icon"
+                    phosphor="DotsThreeVerticalIcon"
                   />
                   <span className="sr-only">More options</span>
                 </Button>
@@ -180,6 +183,7 @@ function FormExample() {
                       lucide="FileIcon"
                       tabler="IconFile"
                       hugeicons="FileIcon"
+                      phosphor="FileIcon"
                     />
                     New File
                     <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -189,6 +193,7 @@ function FormExample() {
                       lucide="FolderIcon"
                       tabler="IconFolder"
                       hugeicons="FolderIcon"
+                      phosphor="FolderIcon"
                     />
                     New Folder
                     <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -199,6 +204,7 @@ function FormExample() {
                         lucide="FolderOpenIcon"
                         tabler="IconFolderOpen"
                         hugeicons="FolderOpenIcon"
+                        phosphor="FolderOpenIcon"
                       />
                       Open Recent
                     </DropdownMenuSubTrigger>
@@ -211,6 +217,7 @@ function FormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Alpha
                           </DropdownMenuItem>
@@ -219,6 +226,7 @@ function FormExample() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Beta
                           </DropdownMenuItem>
@@ -228,6 +236,7 @@ function FormExample() {
                                 lucide="MoreHorizontalIcon"
                                 tabler="IconDots"
                                 hugeicons="MoreHorizontalCircle01Icon"
+                                phosphor="DotsThreeOutlineIcon"
                               />
                               More Projects
                             </DropdownMenuSubTrigger>
@@ -238,6 +247,7 @@ function FormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Gamma
                                 </DropdownMenuItem>
@@ -246,6 +256,7 @@ function FormExample() {
                                     lucide="FileCodeIcon"
                                     tabler="IconFileCode"
                                     hugeicons="CodeIcon"
+                                    phosphor="CodeIcon"
                                   />
                                   Project Delta
                                 </DropdownMenuItem>
@@ -260,6 +271,7 @@ function FormExample() {
                               lucide="FolderSearchIcon"
                               tabler="IconFolderSearch"
                               hugeicons="SearchIcon"
+                              phosphor="MagnifyingGlassIcon"
                             />
                             Browse...
                           </DropdownMenuItem>
@@ -273,6 +285,7 @@ function FormExample() {
                       lucide="SaveIcon"
                       tabler="IconDeviceFloppy"
                       hugeicons="FloppyDiskIcon"
+                      phosphor="FloppyDiskIcon"
                     />
                     Save
                     <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -282,6 +295,7 @@ function FormExample() {
                       lucide="DownloadIcon"
                       tabler="IconDownload"
                       hugeicons="DownloadIcon"
+                      phosphor="DownloadIcon"
                     />
                     Export
                     <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -303,6 +317,7 @@ function FormExample() {
                       lucide="EyeIcon"
                       tabler="IconEye"
                       hugeicons="EyeIcon"
+                      phosphor="EyeIcon"
                     />
                     Show Sidebar
                   </DropdownMenuCheckboxItem>
@@ -319,6 +334,7 @@ function FormExample() {
                       lucide="LayoutIcon"
                       tabler="IconLayout"
                       hugeicons="LayoutIcon"
+                      phosphor="LayoutIcon"
                     />
                     Show Status Bar
                   </DropdownMenuCheckboxItem>
@@ -328,6 +344,7 @@ function FormExample() {
                         lucide="PaletteIcon"
                         tabler="IconPalette"
                         hugeicons="PaintBoardIcon"
+                        phosphor="PaletteIcon"
                       />
                       Theme
                     </DropdownMenuSubTrigger>
@@ -344,6 +361,7 @@ function FormExample() {
                                 lucide="SunIcon"
                                 tabler="IconSun"
                                 hugeicons="SunIcon"
+                                phosphor="SunIcon"
                               />
                               Light
                             </DropdownMenuRadioItem>
@@ -352,6 +370,7 @@ function FormExample() {
                                 lucide="MoonIcon"
                                 tabler="IconMoon"
                                 hugeicons="MoonIcon"
+                                phosphor="MoonIcon"
                               />
                               Dark
                             </DropdownMenuRadioItem>
@@ -360,6 +379,7 @@ function FormExample() {
                                 lucide="MonitorIcon"
                                 tabler="IconDeviceDesktop"
                                 hugeicons="ComputerIcon"
+                                phosphor="MonitorIcon"
                               />
                               System
                             </DropdownMenuRadioItem>
@@ -377,6 +397,7 @@ function FormExample() {
                       lucide="UserIcon"
                       tabler="IconUser"
                       hugeicons="UserIcon"
+                      phosphor="UserIcon"
                     />
                     Profile
                     <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
@@ -386,6 +407,7 @@ function FormExample() {
                       lucide="CreditCardIcon"
                       tabler="IconCreditCard"
                       hugeicons="CreditCardIcon"
+                      phosphor="CreditCardIcon"
                     />
                     Billing
                   </DropdownMenuItem>
@@ -395,6 +417,7 @@ function FormExample() {
                         lucide="SettingsIcon"
                         tabler="IconSettings"
                         hugeicons="SettingsIcon"
+                        phosphor="GearIcon"
                       />
                       Settings
                     </DropdownMenuSubTrigger>
@@ -407,6 +430,7 @@ function FormExample() {
                               lucide="KeyboardIcon"
                               tabler="IconKeyboard"
                               hugeicons="KeyboardIcon"
+                              phosphor="KeyboardIcon"
                             />
                             Keyboard Shortcuts
                           </DropdownMenuItem>
@@ -415,6 +439,7 @@ function FormExample() {
                               lucide="LanguagesIcon"
                               tabler="IconLanguage"
                               hugeicons="LanguageCircleIcon"
+                              phosphor="TranslateIcon"
                             />
                             Language
                           </DropdownMenuItem>
@@ -424,6 +449,7 @@ function FormExample() {
                                 lucide="BellIcon"
                                 tabler="IconBell"
                                 hugeicons="NotificationIcon"
+                                phosphor="BellIcon"
                               />
                               Notifications
                             </DropdownMenuSubTrigger>
@@ -446,6 +472,7 @@ function FormExample() {
                                       lucide="BellIcon"
                                       tabler="IconBell"
                                       hugeicons="NotificationIcon"
+                                      phosphor="BellIcon"
                                     />
                                     Push Notifications
                                   </DropdownMenuCheckboxItem>
@@ -462,6 +489,7 @@ function FormExample() {
                                       lucide="MailIcon"
                                       tabler="IconMail"
                                       hugeicons="MailIcon"
+                                      phosphor="EnvelopeIcon"
                                     />
                                     Email Notifications
                                   </DropdownMenuCheckboxItem>
@@ -477,6 +505,7 @@ function FormExample() {
                               lucide="ShieldIcon"
                               tabler="IconShield"
                               hugeicons="ShieldIcon"
+                              phosphor="ShieldIcon"
                             />
                             Privacy & Security
                           </DropdownMenuItem>
@@ -492,6 +521,7 @@ function FormExample() {
                       lucide="HelpCircleIcon"
                       tabler="IconHelpCircle"
                       hugeicons="HelpCircleIcon"
+                      phosphor="QuestionIcon"
                     />
                     Help & Support
                   </DropdownMenuItem>
@@ -500,6 +530,7 @@ function FormExample() {
                       lucide="FileTextIcon"
                       tabler="IconFileText"
                       hugeicons="File01Icon"
+                      phosphor="FileTextIcon"
                     />
                     Documentation
                   </DropdownMenuItem>
@@ -511,6 +542,7 @@ function FormExample() {
                       lucide="LogOutIcon"
                       tabler="IconLogout"
                       hugeicons="LogoutIcon"
+                      phosphor="SignOutIcon"
                     />
                     Sign Out
                     <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
diff --git a/apps/v4/registry/bases/radix/examples/context-menu-example.tsx b/apps/v4/registry/bases/radix/examples/context-menu-example.tsx
index 99a569e602..c61333ce79 100644
--- a/apps/v4/registry/bases/radix/examples/context-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/context-menu-example.tsx
@@ -83,6 +83,7 @@ function ContextMenuWithIcons() {
                 lucide="CopyIcon"
                 tabler="IconCopy"
                 hugeicons="CopyIcon"
+                phosphor="CopyIcon"
               />
               Copy
             </ContextMenuItem>
@@ -91,6 +92,7 @@ function ContextMenuWithIcons() {
                 lucide="ScissorsIcon"
                 tabler="IconCut"
                 hugeicons="ScissorIcon"
+                phosphor="ScissorsIcon"
               />
               Cut
             </ContextMenuItem>
@@ -99,6 +101,7 @@ function ContextMenuWithIcons() {
                 lucide="ClipboardPasteIcon"
                 tabler="IconClipboard"
                 hugeicons="ClipboardIcon"
+                phosphor="ClipboardIcon"
               />
               Paste
             </ContextMenuItem>
@@ -110,6 +113,7 @@ function ContextMenuWithIcons() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </ContextMenuItem>
@@ -351,6 +355,7 @@ function ContextMenuWithDestructive() {
                 lucide="PencilIcon"
                 tabler="IconPencil"
                 hugeicons="EditIcon"
+                phosphor="PencilIcon"
               />
               Edit
             </ContextMenuItem>
@@ -359,6 +364,7 @@ function ContextMenuWithDestructive() {
                 lucide="ShareIcon"
                 tabler="IconShare"
                 hugeicons="ShareIcon"
+                phosphor="ShareIcon"
               />
               Share
             </ContextMenuItem>
@@ -370,6 +376,7 @@ function ContextMenuWithDestructive() {
                 lucide="ArchiveIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="ArchiveIcon"
               />
               Archive
             </ContextMenuItem>
@@ -378,6 +385,7 @@ function ContextMenuWithDestructive() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </ContextMenuItem>
@@ -470,6 +478,7 @@ function ContextMenuInDialog() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   Copy
                 </ContextMenuItem>
@@ -478,6 +487,7 @@ function ContextMenuInDialog() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   Cut
                 </ContextMenuItem>
@@ -486,6 +496,7 @@ function ContextMenuInDialog() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   Paste
                 </ContextMenuItem>
@@ -512,6 +523,7 @@ function ContextMenuInDialog() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   Delete
                 </ContextMenuItem>
diff --git a/apps/v4/registry/bases/radix/examples/dialog-example.tsx b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
index bf17b4cced..f414c96196 100644
--- a/apps/v4/registry/bases/radix/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
@@ -471,6 +471,7 @@ function DialogChatSettings() {
                                   lucide="InfoIcon"
                                   tabler="IconInfoCircle"
                                   hugeicons="AlertCircleIcon"
+                                  phosphor="InfoIcon"
                                 />
                               </InputGroupButton>
                             </TooltipTrigger>
diff --git a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
index 6495a0bcef..c0a31a9698 100644
--- a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
@@ -102,6 +102,7 @@ function DropdownMenuWithIcons() {
                 lucide="UserIcon"
                 tabler="IconUser"
                 hugeicons="UserIcon"
+                phosphor="UserIcon"
               />
               Profile
             </DropdownMenuItem>
@@ -110,6 +111,7 @@ function DropdownMenuWithIcons() {
                 lucide="CreditCardIcon"
                 tabler="IconCreditCard"
                 hugeicons="CreditCardIcon"
+                phosphor="CreditCardIcon"
               />
               Billing
             </DropdownMenuItem>
@@ -118,6 +120,7 @@ function DropdownMenuWithIcons() {
                 lucide="SettingsIcon"
                 tabler="IconSettings"
                 hugeicons="SettingsIcon"
+                phosphor="GearIcon"
               />
               Settings
             </DropdownMenuItem>
@@ -129,6 +132,7 @@ function DropdownMenuWithIcons() {
                 lucide="LogOutIcon"
                 tabler="IconLogout"
                 hugeicons="LogoutIcon"
+                phosphor="SignOutIcon"
               />
               Log out
             </DropdownMenuItem>
@@ -243,6 +247,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="LayoutIcon"
                 tabler="IconLayout"
                 hugeicons="LayoutIcon"
+                phosphor="LayoutIcon"
               />
               Status Bar
             </DropdownMenuCheckboxItem>
@@ -255,6 +260,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="ActivityIcon"
                 tabler="IconActivity"
                 hugeicons="ActivityIcon"
+                phosphor="ActivityIcon"
               />
               Activity Bar
             </DropdownMenuCheckboxItem>
@@ -266,6 +272,7 @@ function DropdownMenuWithCheckboxes() {
                 lucide="PanelLeftIcon"
                 tabler="IconLayoutSidebar"
                 hugeicons="LayoutLeftIcon"
+                phosphor="SidebarIcon"
               />
               Panel
             </DropdownMenuCheckboxItem>
@@ -299,6 +306,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUp01Icon"
+                  phosphor="ArrowUpIcon"
                 />
                 Top
               </DropdownMenuRadioItem>
@@ -307,6 +315,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowDownIcon"
                   tabler="IconArrowDown"
                   hugeicons="ArrowDown01Icon"
+                  phosphor="ArrowDownIcon"
                 />
                 Bottom
               </DropdownMenuRadioItem>
@@ -315,6 +324,7 @@ function DropdownMenuWithRadio() {
                   lucide="ArrowRightIcon"
                   tabler="IconArrowRight"
                   hugeicons="ArrowRight01Icon"
+                  phosphor="ArrowRightIcon"
                 />
                 Right
               </DropdownMenuRadioItem>
@@ -354,6 +364,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="MailIcon"
                 tabler="IconMail"
                 hugeicons="MailIcon"
+                phosphor="EnvelopeIcon"
               />
               Email notifications
             </DropdownMenuCheckboxItem>
@@ -367,6 +378,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="MessageSquareIcon"
                 tabler="IconMessage"
                 hugeicons="MessageIcon"
+                phosphor="ChatCircleIcon"
               />
               SMS notifications
             </DropdownMenuCheckboxItem>
@@ -380,6 +392,7 @@ function DropdownMenuWithCheckboxesIcons() {
                 lucide="BellIcon"
                 tabler="IconBell"
                 hugeicons="NotificationIcon"
+                phosphor="BellIcon"
               />
               Push notifications
             </DropdownMenuCheckboxItem>
@@ -411,6 +424,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="CreditCardIcon"
                   tabler="IconCreditCard"
                   hugeicons="CreditCardIcon"
+                  phosphor="CreditCardIcon"
                 />
                 Credit Card
               </DropdownMenuRadioItem>
@@ -419,6 +433,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="WalletIcon"
                   tabler="IconWallet"
                   hugeicons="WalletIcon"
+                  phosphor="WalletIcon"
                 />
                 PayPal
               </DropdownMenuRadioItem>
@@ -427,6 +442,7 @@ function DropdownMenuWithRadioIcons() {
                   lucide="Building2Icon"
                   tabler="IconBuildingBank"
                   hugeicons="BankIcon"
+                  phosphor="BankIcon"
                 />
                 Bank Transfer
               </DropdownMenuRadioItem>
@@ -454,6 +470,7 @@ function DropdownMenuWithDestructive() {
                 lucide="PencilIcon"
                 tabler="IconPencil"
                 hugeicons="EditIcon"
+                phosphor="PencilIcon"
               />
               Edit
             </DropdownMenuItem>
@@ -462,6 +479,7 @@ function DropdownMenuWithDestructive() {
                 lucide="ShareIcon"
                 tabler="IconShare"
                 hugeicons="ShareIcon"
+                phosphor="ShareIcon"
               />
               Share
             </DropdownMenuItem>
@@ -473,6 +491,7 @@ function DropdownMenuWithDestructive() {
                 lucide="ArchiveIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="ArchiveIcon"
               />
               Archive
             </DropdownMenuItem>
@@ -481,6 +500,7 @@ function DropdownMenuWithDestructive() {
                 lucide="TrashIcon"
                 tabler="IconTrash"
                 hugeicons="DeleteIcon"
+                phosphor="TrashIcon"
               />
               Delete
             </DropdownMenuItem>
@@ -500,6 +520,7 @@ function DropdownMenuWithAvatar() {
             lucide="BadgeCheckIcon"
             tabler="IconRosetteDiscountCheck"
             hugeicons="CheckmarkBadgeIcon"
+            phosphor="CheckCircleIcon"
           />
           Account
         </DropdownMenuItem>
@@ -508,6 +529,7 @@ function DropdownMenuWithAvatar() {
             lucide="CreditCardIcon"
             tabler="IconCreditCard"
             hugeicons="CreditCardIcon"
+            phosphor="CreditCardIcon"
           />
           Billing
         </DropdownMenuItem>
@@ -516,6 +538,7 @@ function DropdownMenuWithAvatar() {
             lucide="BellIcon"
             tabler="IconBell"
             hugeicons="NotificationIcon"
+            phosphor="BellIcon"
           />
           Notifications
         </DropdownMenuItem>
@@ -527,6 +550,7 @@ function DropdownMenuWithAvatar() {
             lucide="LogOutIcon"
             tabler="IconLogout"
             hugeicons="LogoutIcon"
+            phosphor="SignOutIcon"
           />
           Sign Out
         </DropdownMenuItem>
@@ -557,6 +581,7 @@ function DropdownMenuWithAvatar() {
                 lucide="ChevronsUpDownIcon"
                 tabler="IconSelector"
                 hugeicons="UnfoldMoreIcon"
+                phosphor="CaretUpDownIcon"
                 className="text-muted-foreground ml-auto"
               />
             </Button>
@@ -610,6 +635,7 @@ function DropdownMenuInDialog() {
                     lucide="CopyIcon"
                     tabler="IconCopy"
                     hugeicons="CopyIcon"
+                    phosphor="CopyIcon"
                   />
                   Copy
                 </DropdownMenuItem>
@@ -618,6 +644,7 @@ function DropdownMenuInDialog() {
                     lucide="ScissorsIcon"
                     tabler="IconCut"
                     hugeicons="ScissorIcon"
+                    phosphor="ScissorsIcon"
                   />
                   Cut
                 </DropdownMenuItem>
@@ -626,6 +653,7 @@ function DropdownMenuInDialog() {
                     lucide="ClipboardPasteIcon"
                     tabler="IconClipboard"
                     hugeicons="ClipboardIcon"
+                    phosphor="ClipboardIcon"
                   />
                   Paste
                 </DropdownMenuItem>
@@ -654,6 +682,7 @@ function DropdownMenuInDialog() {
                     lucide="TrashIcon"
                     tabler="IconTrash"
                     hugeicons="DeleteIcon"
+                    phosphor="TrashIcon"
                   />
                   Delete
                 </DropdownMenuItem>
@@ -690,6 +719,7 @@ function DropdownMenuComplex() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
               />
               New File
               <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
@@ -699,6 +729,7 @@ function DropdownMenuComplex() {
                 lucide="FolderIcon"
                 tabler="IconFolder"
                 hugeicons="FolderIcon"
+                phosphor="FolderIcon"
               />
               New Folder
               <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
@@ -709,6 +740,7 @@ function DropdownMenuComplex() {
                   lucide="FolderOpenIcon"
                   tabler="IconFolderOpen"
                   hugeicons="FolderOpenIcon"
+                  phosphor="FolderOpenIcon"
                 />
                 Open Recent
               </DropdownMenuSubTrigger>
@@ -721,6 +753,7 @@ function DropdownMenuComplex() {
                         lucide="FileCodeIcon"
                         tabler="IconFileCode"
                         hugeicons="CodeIcon"
+                        phosphor="CodeIcon"
                       />
                       Project Alpha
                     </DropdownMenuItem>
@@ -729,6 +762,7 @@ function DropdownMenuComplex() {
                         lucide="FileCodeIcon"
                         tabler="IconFileCode"
                         hugeicons="CodeIcon"
+                        phosphor="CodeIcon"
                       />
                       Project Beta
                     </DropdownMenuItem>
@@ -738,6 +772,7 @@ function DropdownMenuComplex() {
                           lucide="MoreHorizontalIcon"
                           tabler="IconDots"
                           hugeicons="MoreHorizontalCircle01Icon"
+                          phosphor="DotsThreeOutlineIcon"
                         />
                         More Projects
                       </DropdownMenuSubTrigger>
@@ -748,6 +783,7 @@ function DropdownMenuComplex() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Gamma
                           </DropdownMenuItem>
@@ -756,6 +792,7 @@ function DropdownMenuComplex() {
                               lucide="FileCodeIcon"
                               tabler="IconFileCode"
                               hugeicons="CodeIcon"
+                              phosphor="CodeIcon"
                             />
                             Project Delta
                           </DropdownMenuItem>
@@ -770,6 +807,7 @@ function DropdownMenuComplex() {
                         lucide="FolderSearchIcon"
                         tabler="IconFolderSearch"
                         hugeicons="SearchIcon"
+                        phosphor="MagnifyingGlassIcon"
                       />
                       Browse...
                     </DropdownMenuItem>
@@ -783,6 +821,7 @@ function DropdownMenuComplex() {
                 lucide="SaveIcon"
                 tabler="IconDeviceFloppy"
                 hugeicons="FloppyDiskIcon"
+                phosphor="FloppyDiskIcon"
               />
               Save
               <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
@@ -792,6 +831,7 @@ function DropdownMenuComplex() {
                 lucide="DownloadIcon"
                 tabler="IconDownload"
                 hugeicons="DownloadIcon"
+                phosphor="DownloadIcon"
               />
               Export
               <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
@@ -810,6 +850,7 @@ function DropdownMenuComplex() {
                 lucide="EyeIcon"
                 tabler="IconEye"
                 hugeicons="EyeIcon"
+                phosphor="EyeIcon"
               />
               Show Sidebar
             </DropdownMenuCheckboxItem>
@@ -823,6 +864,7 @@ function DropdownMenuComplex() {
                 lucide="LayoutIcon"
                 tabler="IconLayout"
                 hugeicons="LayoutIcon"
+                phosphor="LayoutIcon"
               />
               Show Status Bar
             </DropdownMenuCheckboxItem>
@@ -832,6 +874,7 @@ function DropdownMenuComplex() {
                   lucide="PaletteIcon"
                   tabler="IconPalette"
                   hugeicons="PaintBoardIcon"
+                  phosphor="PaletteIcon"
                 />
                 Theme
               </DropdownMenuSubTrigger>
@@ -848,6 +891,7 @@ function DropdownMenuComplex() {
                           lucide="SunIcon"
                           tabler="IconSun"
                           hugeicons="SunIcon"
+                          phosphor="SunIcon"
                         />
                         Light
                       </DropdownMenuRadioItem>
@@ -856,6 +900,7 @@ function DropdownMenuComplex() {
                           lucide="MoonIcon"
                           tabler="IconMoon"
                           hugeicons="MoonIcon"
+                          phosphor="MoonIcon"
                         />
                         Dark
                       </DropdownMenuRadioItem>
@@ -864,6 +909,7 @@ function DropdownMenuComplex() {
                           lucide="MonitorIcon"
                           tabler="IconDeviceDesktop"
                           hugeicons="ComputerIcon"
+                          phosphor="MonitorIcon"
                         />
                         System
                       </DropdownMenuRadioItem>
@@ -881,6 +927,7 @@ function DropdownMenuComplex() {
                 lucide="UserIcon"
                 tabler="IconUser"
                 hugeicons="UserIcon"
+                phosphor="UserIcon"
               />
               Profile
               <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
@@ -890,6 +937,7 @@ function DropdownMenuComplex() {
                 lucide="CreditCardIcon"
                 tabler="IconCreditCard"
                 hugeicons="CreditCardIcon"
+                phosphor="CreditCardIcon"
               />
               Billing
             </DropdownMenuItem>
@@ -899,6 +947,7 @@ function DropdownMenuComplex() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="SettingsIcon"
+                  phosphor="GearIcon"
                 />
                 Settings
               </DropdownMenuSubTrigger>
@@ -911,6 +960,7 @@ function DropdownMenuComplex() {
                         lucide="KeyboardIcon"
                         tabler="IconKeyboard"
                         hugeicons="KeyboardIcon"
+                        phosphor="KeyboardIcon"
                       />
                       Keyboard Shortcuts
                     </DropdownMenuItem>
@@ -919,6 +969,7 @@ function DropdownMenuComplex() {
                         lucide="LanguagesIcon"
                         tabler="IconLanguage"
                         hugeicons="LanguageCircleIcon"
+                        phosphor="TranslateIcon"
                       />
                       Language
                     </DropdownMenuItem>
@@ -928,6 +979,7 @@ function DropdownMenuComplex() {
                           lucide="BellIcon"
                           tabler="IconBell"
                           hugeicons="NotificationIcon"
+                          phosphor="BellIcon"
                         />
                         Notifications
                       </DropdownMenuSubTrigger>
@@ -950,6 +1002,7 @@ function DropdownMenuComplex() {
                                 lucide="BellIcon"
                                 tabler="IconBell"
                                 hugeicons="NotificationIcon"
+                                phosphor="BellIcon"
                               />
                               Push Notifications
                             </DropdownMenuCheckboxItem>
@@ -966,6 +1019,7 @@ function DropdownMenuComplex() {
                                 lucide="MailIcon"
                                 tabler="IconMail"
                                 hugeicons="MailIcon"
+                                phosphor="EnvelopeIcon"
                               />
                               Email Notifications
                             </DropdownMenuCheckboxItem>
@@ -981,6 +1035,7 @@ function DropdownMenuComplex() {
                         lucide="ShieldIcon"
                         tabler="IconShield"
                         hugeicons="ShieldIcon"
+                        phosphor="ShieldIcon"
                       />
                       Privacy & Security
                     </DropdownMenuItem>
@@ -996,6 +1051,7 @@ function DropdownMenuComplex() {
                 lucide="HelpCircleIcon"
                 tabler="IconHelpCircle"
                 hugeicons="HelpCircleIcon"
+                phosphor="QuestionIcon"
               />
               Help & Support
             </DropdownMenuItem>
@@ -1004,6 +1060,7 @@ function DropdownMenuComplex() {
                 lucide="FileTextIcon"
                 tabler="IconFileText"
                 hugeicons="File01Icon"
+                phosphor="FileTextIcon"
               />
               Documentation
             </DropdownMenuItem>
@@ -1015,6 +1072,7 @@ function DropdownMenuComplex() {
                 lucide="LogOutIcon"
                 tabler="IconLogout"
                 hugeicons="LogoutIcon"
+                phosphor="SignOutIcon"
               />
               Sign Out
               <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
diff --git a/apps/v4/registry/bases/radix/examples/empty-example.tsx b/apps/v4/registry/bases/radix/examples/empty-example.tsx
index 3c3f82cd32..b3aceb7c64 100644
--- a/apps/v4/registry/bases/radix/examples/empty-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/empty-example.tsx
@@ -57,6 +57,7 @@ function EmptyBasic() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRight01Icon"
+                phosphor="ArrowUpRightIcon"
               />
             </a>
           </Button>
@@ -85,6 +86,7 @@ function EmptyWithMutedBackground() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRight01Icon"
+                phosphor="ArrowUpRightIcon"
               />
             </a>
           </Button>
@@ -113,6 +115,7 @@ function EmptyWithBorder() {
                 lucide="CircleDashedIcon"
                 tabler="IconCircleDashed"
                 hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -138,6 +141,7 @@ function EmptyWithIcon() {
               lucide="FolderIcon"
               tabler="IconFolder"
               hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
             />
           </EmptyMedia>
           <EmptyTitle>Nothing to see here</EmptyTitle>
@@ -152,6 +156,7 @@ function EmptyWithIcon() {
               lucide="PlusIcon"
               tabler="IconPlus"
               hugeicons="PlusSignIcon"
+              phosphor="PlusIcon"
               data-icon="inline-start"
             />
             New Post
@@ -181,6 +186,7 @@ function EmptyWithMutedBackgroundAlt() {
                 lucide="CircleDashedIcon"
                 tabler="IconCircleDashed"
                 hugeicons="DashedLineCircleIcon"
+                phosphor="CircleDashedIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -206,6 +212,7 @@ function EmptyInCard() {
               lucide="FolderIcon"
               tabler="IconFolder"
               hugeicons="Folder01Icon"
+              phosphor="FolderIcon"
             />
           </EmptyMedia>
           <EmptyTitle>No projects yet</EmptyTitle>
@@ -228,6 +235,7 @@ function EmptyInCard() {
                 lucide="ArrowUpRightIcon"
                 tabler="IconArrowUpRight"
                 hugeicons="ArrowUpRight01Icon"
+                phosphor="ArrowUpRightIcon"
               />
             </a>
           </Button>
diff --git a/apps/v4/registry/bases/radix/examples/input-group-example.tsx b/apps/v4/registry/bases/radix/examples/input-group-example.tsx
index 8a5cc16298..b706ae83ea 100644
--- a/apps/v4/registry/bases/radix/examples/input-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-group-example.tsx
@@ -131,6 +131,7 @@ function InputGroupWithAddons() {
                 lucide="SearchIcon"
                 tabler="IconSearch"
                 hugeicons="SearchIcon"
+                phosphor="MagnifyingGlassIcon"
                 className="text-muted-foreground"
               />
             </InputGroupAddon>
@@ -147,6 +148,7 @@ function InputGroupWithAddons() {
                 lucide="EyeOffIcon"
                 tabler="IconEyeClosed"
                 hugeicons="ViewOffIcon"
+                phosphor="EyeSlashIcon"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -162,6 +164,7 @@ function InputGroupWithAddons() {
                 lucide="MicIcon"
                 tabler="IconMicrophone"
                 hugeicons="VoiceIcon"
+                phosphor="MicrophoneIcon"
                 className="text-muted-foreground"
               />
             </InputGroupAddon>
@@ -170,6 +173,7 @@ function InputGroupWithAddons() {
                 lucide="RadioIcon"
                 tabler="IconPlayerRecordFilled"
                 hugeicons="RecordIcon"
+                phosphor="RecordIcon"
                 className="animate-pulse text-red-500"
               />
             </InputGroupAddon>
@@ -185,6 +189,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -200,6 +205,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -214,6 +220,7 @@ function InputGroupWithAddons() {
                 lucide="StarIcon"
                 tabler="IconStar"
                 hugeicons="StarIcon"
+                phosphor="StarIcon"
               />
               <InputGroupButton
                 size="icon-xs"
@@ -223,6 +230,7 @@ function InputGroupWithAddons() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -231,6 +239,7 @@ function InputGroupWithAddons() {
                 lucide="RadioIcon"
                 tabler="IconPlayerRecordFilled"
                 hugeicons="RecordIcon"
+                phosphor="RecordIcon"
                 className="animate-pulse text-red-500"
               />
             </InputGroupAddon>
@@ -245,6 +254,7 @@ function InputGroupWithAddons() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -310,6 +320,7 @@ function InputGroupWithButtons() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -322,6 +333,7 @@ function InputGroupWithButtons() {
                   lucide="TrashIcon"
                   tabler="IconTrash"
                   hugeicons="DeleteIcon"
+                  phosphor="TrashIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -354,6 +366,7 @@ function InputGroupWithTooltip({
                       lucide="InfoIcon"
                       tabler="IconInfoCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="InfoIcon"
                     />
                   </InputGroupButton>
                 </TooltipTrigger>
@@ -378,6 +391,7 @@ function InputGroupWithTooltip({
                       lucide="ChevronDownIcon"
                       tabler="IconChevronDown"
                       hugeicons="ArrowDownIcon"
+                      phosphor="CaretDownIcon"
                     />
                   </InputGroupButton>
                 </DropdownMenuTrigger>
@@ -415,6 +429,7 @@ function InputGroupWithTooltip({
                       lucide="InfoIcon"
                       tabler="IconInfoCircle"
                       hugeicons="AlertCircleIcon"
+                      phosphor="InfoIcon"
                     />
                   </InputGroupButton>
                 </InputGroupAddon>
@@ -441,6 +456,7 @@ function InputGroupWithTooltip({
                   lucide="StarIcon"
                   tabler="IconStar"
                   hugeicons="StarIcon"
+                  phosphor="StarIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
@@ -460,6 +476,7 @@ function InputGroupWithTooltip({
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -512,6 +529,7 @@ function InputGroupWithKbd() {
                 lucide="SparklesIcon"
                 tabler="IconServerSpark"
                 hugeicons="SparklesIcon"
+                phosphor="SparkleIcon"
               />
             </InputGroupAddon>
             <InputGroupAddon align="inline-end">
@@ -532,6 +550,7 @@ function InputGroupWithKbd() {
                   lucide="CheckIcon"
                   tabler="IconCheck"
                   hugeicons="Tick02Icon"
+                  phosphor="CheckIcon"
                   className="size-3 text-white"
                 />
               </div>
@@ -551,6 +570,7 @@ function InputGroupWithKbd() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
@@ -566,6 +586,7 @@ function InputGroupWithKbd() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </InputGroupAddon>
           <InputGroupAddon align="inline-end">Disabled</InputGroupAddon>
@@ -580,6 +601,7 @@ function InputGroupWithKbd() {
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -593,6 +615,7 @@ function InputGroupWithKbd() {
                   lucide="InfoIcon"
                   tabler="IconInfoCircle"
                   hugeicons="AlertCircleIcon"
+                  phosphor="InfoIcon"
                 />
               </InputGroupAddon>
             </InputGroup>
@@ -644,6 +667,7 @@ function InputGroupInCard() {
                     lucide="MailIcon"
                     tabler="IconMail"
                     hugeicons="MailIcon"
+                    phosphor="EnvelopeIcon"
                   />
                 </InputGroupAddon>
               </InputGroup>
@@ -660,6 +684,7 @@ function InputGroupInCard() {
                     lucide="ExternalLinkIcon"
                     tabler="IconExternalLink"
                     hugeicons="LinkSquare02Icon"
+                    phosphor="ArrowSquareOutIcon"
                   />
                 </InputGroupAddon>
               </InputGroup>
@@ -753,6 +778,7 @@ function InputGroupTextareaExamples() {
                 lucide="InfoIcon"
                 tabler="IconInfoCircle"
                 hugeicons="AlertCircleIcon"
+                phosphor="InfoIcon"
                 className="text-muted-foreground ml-auto"
               />
             </InputGroupAddon>
@@ -781,6 +807,7 @@ function InputGroupTextareaExamples() {
                   lucide="ArrowUpIcon"
                   tabler="IconArrowUp"
                   hugeicons="ArrowUpIcon"
+                  phosphor="ArrowUpIcon"
                 />
                 <span className="sr-only">Send</span>
               </InputGroupButton>
@@ -819,6 +846,7 @@ function InputGroupTextareaExamples() {
                   lucide="CodeIcon"
                   tabler="IconBrandJavascript"
                   hugeicons="CodeIcon"
+                  phosphor="CodeIcon"
                 />
                 script.js
               </InputGroupText>
@@ -827,6 +855,7 @@ function InputGroupTextareaExamples() {
                   lucide="RefreshCwIcon"
                   tabler="IconRefresh"
                   hugeicons="RefreshIcon"
+                  phosphor="ArrowClockwiseIcon"
                 />
               </InputGroupButton>
               <InputGroupButton size="icon-xs" variant="ghost">
@@ -834,6 +863,7 @@ function InputGroupTextareaExamples() {
                   lucide="CopyIcon"
                   tabler="IconCopy"
                   hugeicons="CopyIcon"
+                  phosphor="CopyIcon"
                 />
               </InputGroupButton>
             </InputGroupAddon>
diff --git a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
index bebdcbebd2..0c9baabf9f 100644
--- a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
@@ -246,6 +246,7 @@ function InputOTPForm() {
                     lucide="RefreshCwIcon"
                     hugeicons="RefreshIcon"
                     tabler="IconRefresh"
+                    phosphor="ArrowClockwiseIcon"
                     data-icon="inline-start"
                   />
                   Resend Code
diff --git a/apps/v4/registry/bases/radix/examples/item-example.tsx b/apps/v4/registry/bases/radix/examples/item-example.tsx
index aea932e364..0858dc4adf 100644
--- a/apps/v4/registry/bases/radix/examples/item-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/item-example.tsx
@@ -91,6 +91,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -103,6 +104,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -118,6 +120,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -133,6 +136,7 @@ function DefaultVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -205,6 +209,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -217,6 +222,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -232,6 +238,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -247,6 +254,7 @@ function OutlineVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -319,6 +327,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -331,6 +340,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -346,6 +356,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -361,6 +372,7 @@ function MutedVariantItems() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -437,6 +449,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -449,6 +462,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -464,6 +478,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -479,6 +494,7 @@ function DefaultVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -555,6 +571,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -567,6 +584,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -582,6 +600,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -597,6 +616,7 @@ function OutlineVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -673,6 +693,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -685,6 +706,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -700,6 +722,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -715,6 +738,7 @@ function MutedVariantItemsSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -785,6 +809,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -797,6 +822,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -812,6 +838,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -824,6 +851,7 @@ function DefaultVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -887,6 +915,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -899,6 +928,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -914,6 +944,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -926,6 +957,7 @@ function OutlineVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -989,6 +1021,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1001,6 +1034,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1016,6 +1050,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1028,6 +1063,7 @@ function MutedVariantItemsExtraSmall() {
             lucide="InboxIcon"
             tabler="IconArchive"
             hugeicons="Archive02Icon"
+            phosphor="ArchiveIcon"
           />
         </ItemMedia>
         <ItemContent>
@@ -1080,6 +1116,7 @@ function DefaultLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1094,6 +1131,7 @@ function DefaultLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1152,6 +1190,7 @@ function OutlineLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1166,6 +1205,7 @@ function OutlineLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1224,6 +1264,7 @@ function MutedLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1238,6 +1279,7 @@ function MutedLinkItems() {
                 lucide="InboxIcon"
                 tabler="IconArchive"
                 hugeicons="Archive02Icon"
+                phosphor="TrayIcon"
               />
             </ItemMedia>
             <ItemContent>
@@ -1305,6 +1347,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1318,6 +1361,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1331,6 +1375,7 @@ function OutlineItemGroup() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1395,6 +1440,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1409,6 +1455,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1423,6 +1470,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
@@ -1437,6 +1485,7 @@ function ItemSeparatorExample() {
               lucide="InboxIcon"
               tabler="IconArchive"
               hugeicons="Archive02Icon"
+              phosphor="TrayIcon"
             />
           </ItemMedia>
           <ItemContent>
diff --git a/apps/v4/registry/bases/radix/examples/kbd-example.tsx b/apps/v4/registry/bases/radix/examples/kbd-example.tsx
index 04523a08dc..b01f48a302 100644
--- a/apps/v4/registry/bases/radix/examples/kbd-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/kbd-example.tsx
@@ -89,6 +89,7 @@ function KbdWithIcons() {
             lucide="CircleDashedIcon"
             tabler="IconCircleDashed"
             hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
           />
         </Kbd>
         <Kbd>
@@ -96,6 +97,7 @@ function KbdWithIcons() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
           />
         </Kbd>
         <Kbd>
@@ -103,6 +105,7 @@ function KbdWithIcons() {
             lucide="ArrowRightIcon"
             tabler="IconArrowRight"
             hugeicons="ArrowRight01Icon"
+            phosphor="ArrowRightIcon"
           />
         </Kbd>
       </KbdGroup>
@@ -119,6 +122,7 @@ function KbdWithIconsAndText() {
             lucide="ArrowLeftIcon"
             tabler="IconArrowLeft"
             hugeicons="ArrowLeft01Icon"
+            phosphor="ArrowLeftIcon"
           />
           Left
         </Kbd>
@@ -127,6 +131,7 @@ function KbdWithIconsAndText() {
             lucide="CircleDashedIcon"
             tabler="IconCircleDashed"
             hugeicons="DashedLineCircleIcon"
+            phosphor="CircleDashedIcon"
           />
           Voice Enabled
         </Kbd>
@@ -158,6 +163,7 @@ function KbdInTooltip() {
               lucide="SaveIcon"
               tabler="IconDeviceFloppy"
               hugeicons="FloppyDiskIcon"
+              phosphor="FloppyDiskIcon"
             />
           </Button>
         </TooltipTrigger>
diff --git a/apps/v4/registry/bases/radix/examples/menubar-example.tsx b/apps/v4/registry/bases/radix/examples/menubar-example.tsx
index 398e038915..b763e4ed59 100644
--- a/apps/v4/registry/bases/radix/examples/menubar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/menubar-example.tsx
@@ -247,6 +247,7 @@ function MenubarWithIcons() {
                   lucide="FileIcon"
                   tabler="IconFile"
                   hugeicons="FileIcon"
+                  phosphor="FileIcon"
                 />
                 New File <MenubarShortcut>⌘N</MenubarShortcut>
               </MenubarItem>
@@ -255,6 +256,7 @@ function MenubarWithIcons() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Open Folder
               </MenubarItem>
@@ -266,6 +268,7 @@ function MenubarWithIcons() {
                   lucide="SaveIcon"
                   tabler="IconDeviceFloppy"
                   hugeicons="FloppyDiskIcon"
+                  phosphor="FloppyDiskIcon"
                 />
                 Save <MenubarShortcut>⌘S</MenubarShortcut>
               </MenubarItem>
@@ -281,6 +284,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Settings
               </MenubarItem>
@@ -289,6 +293,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Help
               </MenubarItem>
@@ -298,6 +303,7 @@ function MenubarWithIcons() {
                   lucide="CircleDashedIcon"
                   tabler="IconCircleDashed"
                   hugeicons="DashedLineCircleIcon"
+                  phosphor="CircleDashedIcon"
                 />
                 Delete
               </MenubarItem>
@@ -372,6 +378,7 @@ function MenubarFormat() {
                   lucide="BoldIcon"
                   tabler="IconBold"
                   hugeicons="TextBoldIcon"
+                  phosphor="TextBIcon"
                 />
                 Bold <MenubarShortcut>⌘B</MenubarShortcut>
               </MenubarItem>
@@ -380,6 +387,7 @@ function MenubarFormat() {
                   lucide="ItalicIcon"
                   tabler="IconItalic"
                   hugeicons="TextItalicIcon"
+                  phosphor="TextItalicIcon"
                 />
                 Italic <MenubarShortcut>⌘I</MenubarShortcut>
               </MenubarItem>
@@ -388,6 +396,7 @@ function MenubarFormat() {
                   lucide="UnderlineIcon"
                   tabler="IconUnderline"
                   hugeicons="TextUnderlineIcon"
+                  phosphor="TextUnderlineIcon"
                 />
                 Underline <MenubarShortcut>⌘U</MenubarShortcut>
               </MenubarItem>
@@ -429,6 +438,7 @@ function MenubarInsert() {
                   lucide="ImageIcon"
                   tabler="IconPhoto"
                   hugeicons="ImageIcon"
+                  phosphor="ImageIcon"
                 />
                 Media
               </MenubarSubTrigger>
@@ -447,6 +457,7 @@ function MenubarInsert() {
                   lucide="LinkIcon"
                   tabler="IconLink"
                   hugeicons="LinkIcon"
+                  phosphor="LinkIcon"
                 />
                 Link <MenubarShortcut>⌘K</MenubarShortcut>
               </MenubarItem>
@@ -455,6 +466,7 @@ function MenubarInsert() {
                   lucide="TableIcon"
                   tabler="IconTable"
                   hugeicons="TableIcon"
+                  phosphor="TableIcon"
                 />
                 Table
               </MenubarItem>
@@ -470,6 +482,7 @@ function MenubarInsert() {
                   lucide="SearchIcon"
                   tabler="IconSearch"
                   hugeicons="SearchIcon"
+                  phosphor="MagnifyingGlassIcon"
                 />
                 Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
               </MenubarItem>
@@ -478,6 +491,7 @@ function MenubarInsert() {
                   lucide="CheckIcon"
                   tabler="IconCheck"
                   hugeicons="Tick02Icon"
+                  phosphor="CheckIcon"
                 />
                 Spell Check
               </MenubarItem>
@@ -502,6 +516,7 @@ function MenubarDestructive() {
                   lucide="FileIcon"
                   tabler="IconFile"
                   hugeicons="FileIcon"
+                  phosphor="FileIcon"
                 />
                 New File <MenubarShortcut>⌘N</MenubarShortcut>
               </MenubarItem>
@@ -510,6 +525,7 @@ function MenubarDestructive() {
                   lucide="FolderIcon"
                   tabler="IconFolder"
                   hugeicons="FolderIcon"
+                  phosphor="FolderIcon"
                 />
                 Open Folder
               </MenubarItem>
@@ -521,6 +537,7 @@ function MenubarDestructive() {
                   lucide="TrashIcon"
                   tabler="IconTrash"
                   hugeicons="DeleteIcon"
+                  phosphor="TrashIcon"
                 />
                 Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
               </MenubarItem>
@@ -536,6 +553,7 @@ function MenubarDestructive() {
                   lucide="UserIcon"
                   tabler="IconUser"
                   hugeicons="UserIcon"
+                  phosphor="UserIcon"
                 />
                 Profile
               </MenubarItem>
@@ -544,6 +562,7 @@ function MenubarDestructive() {
                   lucide="SettingsIcon"
                   tabler="IconSettings"
                   hugeicons="SettingsIcon"
+                  phosphor="GearIcon"
                 />
                 Settings
               </MenubarItem>
@@ -555,6 +574,7 @@ function MenubarDestructive() {
                   lucide="LogOutIcon"
                   tabler="IconLogout"
                   hugeicons="LogoutIcon"
+                  phosphor="SignOutIcon"
                 />
                 Sign out
               </MenubarItem>
@@ -566,6 +586,7 @@ function MenubarDestructive() {
                   lucide="TrashIcon"
                   tabler="IconTrash"
                   hugeicons="DeleteIcon"
+                  phosphor="TrashIcon"
                 />
                 Delete
               </MenubarItem>
@@ -601,6 +622,7 @@ function MenubarInDialog() {
                       lucide="CopyIcon"
                       tabler="IconCopy"
                       hugeicons="CopyIcon"
+                      phosphor="CopyIcon"
                     />
                     Copy
                   </MenubarItem>
@@ -609,6 +631,7 @@ function MenubarInDialog() {
                       lucide="ScissorsIcon"
                       tabler="IconCut"
                       hugeicons="ScissorIcon"
+                      phosphor="ScissorsIcon"
                     />
                     Cut
                   </MenubarItem>
@@ -617,6 +640,7 @@ function MenubarInDialog() {
                       lucide="ClipboardPasteIcon"
                       tabler="IconClipboard"
                       hugeicons="ClipboardIcon"
+                      phosphor="ClipboardIcon"
                     />
                     Paste
                   </MenubarItem>
@@ -643,6 +667,7 @@ function MenubarInDialog() {
                       lucide="TrashIcon"
                       tabler="IconTrash"
                       hugeicons="DeleteIcon"
+                      phosphor="TrashIcon"
                     />
                     Delete
                   </MenubarItem>
diff --git a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
index dec68c8719..0983ec45dc 100644
--- a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
@@ -197,6 +197,7 @@ function NavigationMenuWithoutViewport() {
                         lucide="CircleAlertIcon"
                         tabler="IconExclamationCircle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="WarningCircleIcon"
                       />
                       Backlog
                     </Link>
@@ -207,6 +208,7 @@ function NavigationMenuWithoutViewport() {
                         lucide="CircleAlertIcon"
                         tabler="IconExclamationCircle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="WarningCircleIcon"
                       />
                       To Do
                     </Link>
@@ -217,6 +219,7 @@ function NavigationMenuWithoutViewport() {
                         lucide="CircleAlertIcon"
                         tabler="IconExclamationCircle"
                         hugeicons="AlertCircleIcon"
+                        phosphor="WarningCircleIcon"
                       />
                       Done
                     </Link>
diff --git a/apps/v4/registry/bases/radix/examples/progress-example.tsx b/apps/v4/registry/bases/radix/examples/progress-example.tsx
index b8cf1c6337..de7cbd5c0c 100644
--- a/apps/v4/registry/bases/radix/examples/progress-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/progress-example.tsx
@@ -118,6 +118,7 @@ function FileUploadList() {
                 lucide="FileIcon"
                 tabler="IconFile"
                 hugeicons="FileIcon"
+                phosphor="FileIcon"
                 className="size-5"
               />
             </ItemMedia>
diff --git a/apps/v4/registry/bases/radix/examples/select-example.tsx b/apps/v4/registry/bases/radix/examples/select-example.tsx
index aa3b3d189a..5c86142043 100644
--- a/apps/v4/registry/bases/radix/examples/select-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/select-example.tsx
@@ -100,6 +100,7 @@ function SelectWithIcons() {
                     lucide="ChartLineIcon"
                     tabler="IconChartLine"
                     hugeicons="Chart03Icon"
+                    phosphor="ChartLineIcon"
                   />
                   Chart Type
                 </>
@@ -113,6 +114,7 @@ function SelectWithIcons() {
                   lucide="ChartLineIcon"
                   tabler="IconChartLine"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartBarIcon"
                 />
                 Line
               </SelectItem>
@@ -121,6 +123,7 @@ function SelectWithIcons() {
                   lucide="ChartBarIcon"
                   tabler="IconChartBar"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartBarIcon"
                 />
                 Bar
               </SelectItem>
@@ -129,6 +132,7 @@ function SelectWithIcons() {
                   lucide="ChartPieIcon"
                   tabler="IconChartPie"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartPieIcon"
                 />
                 Pie
               </SelectItem>
@@ -144,6 +148,7 @@ function SelectWithIcons() {
                     lucide="ChartLineIcon"
                     tabler="IconChartLine"
                     hugeicons="Chart03Icon"
+                    phosphor="ChartLineIcon"
                   />
                   Chart Type
                 </>
@@ -157,6 +162,7 @@ function SelectWithIcons() {
                   lucide="ChartLineIcon"
                   tabler="IconChartLine"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartLineIcon"
                 />
                 Line
               </SelectItem>
@@ -165,6 +171,7 @@ function SelectWithIcons() {
                   lucide="ChartBarIcon"
                   tabler="IconChartBar"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartBarIcon"
                 />
                 Bar
               </SelectItem>
@@ -173,6 +180,7 @@ function SelectWithIcons() {
                   lucide="ChartPieIcon"
                   tabler="IconChartPie"
                   hugeicons="Chart03Icon"
+                  phosphor="ChartPieIcon"
                 />
                 Pie
               </SelectItem>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
index 6ea3d5de7f..c16b0d8216 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
@@ -193,6 +193,7 @@ export default function SidebarExample() {
                           lucide="ChevronsUpDownIcon"
                           tabler="IconSelector"
                           hugeicons="UnfoldMoreIcon"
+                          phosphor="CaretUpDownIcon"
                         />
                       </ItemActions>
                     </Item>
@@ -211,6 +212,7 @@ export default function SidebarExample() {
                             lucide="CheckIcon"
                             tabler="IconCheck"
                             hugeicons="Tick02Icon"
+                            phosphor="CheckIcon"
                             className="ml-auto"
                           />
                         )}
@@ -236,6 +238,7 @@ export default function SidebarExample() {
                   lucide="SearchIcon"
                   tabler="IconSearch"
                   hugeicons="SearchIcon"
+                  phosphor="MagnifyingGlassIcon"
                   className="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none"
                 />
               </SidebarGroupContent>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
index 559811a5da..4e3a773c42 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
@@ -205,6 +205,7 @@ export default function SidebarFloatingExample() {
                           lucide="MoreHorizontalIcon"
                           tabler="IconDots"
                           hugeicons="MoreHorizontalCircle01Icon"
+                          phosphor="DotsThreeOutlineIcon"
                           className="ml-auto"
                         />
                       </SidebarMenuButton>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
index 49fda8025e..3e6e488368 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
@@ -80,6 +80,7 @@ export default function SidebarIconExample() {
             lucide="TerminalSquareIcon"
             tabler="IconTerminal2"
             hugeicons="ComputerTerminalIcon"
+            phosphor="TerminalIcon"
           />
         ),
         isActive: true,
@@ -106,6 +107,7 @@ export default function SidebarIconExample() {
             lucide="BotIcon"
             tabler="IconRobot"
             hugeicons="RoboticIcon"
+            phosphor="RobotIcon"
           />
         ),
         items: [
@@ -131,6 +133,7 @@ export default function SidebarIconExample() {
             lucide="BookOpen"
             tabler="IconBook"
             hugeicons="BookOpen02Icon"
+            phosphor="BookOpenIcon"
           />
         ),
         items: [
@@ -160,6 +163,7 @@ export default function SidebarIconExample() {
             lucide="Settings2Icon"
             tabler="IconSettings"
             hugeicons="Settings05Icon"
+            phosphor="GearIcon"
           />
         ),
         items: [
@@ -191,6 +195,7 @@ export default function SidebarIconExample() {
             lucide="FrameIcon"
             tabler="IconFrame"
             hugeicons="CropIcon"
+            phosphor="CropIcon"
           />
         ),
       },
@@ -202,6 +207,7 @@ export default function SidebarIconExample() {
             lucide="PieChartIcon"
             tabler="IconChartPie"
             hugeicons="PieChartIcon"
+            phosphor="ChartPieIcon"
           />
         ),
       },
@@ -213,6 +219,7 @@ export default function SidebarIconExample() {
             lucide="MapIcon"
             tabler="IconMap"
             hugeicons="MapsIcon"
+            phosphor="MapTrifoldIcon"
           />
         ),
       },
@@ -277,6 +284,7 @@ export default function SidebarIconExample() {
                       lucide="ChevronsUpDownIcon"
                       tabler="IconSelector"
                       hugeicons="UnfoldMoreIcon"
+                      phosphor="CaretUpDownIcon"
                     />
                   </SidebarMenuButton>
                 </DropdownMenuTrigger>
@@ -317,6 +325,7 @@ export default function SidebarIconExample() {
                           lucide="ChevronRightIcon"
                           tabler="IconChevronRight"
                           hugeicons="ArrowRight01Icon"
+                          phosphor="CaretRightIcon"
                           className="ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90"
                         />
                       </CollapsibleTrigger>
@@ -381,6 +390,7 @@ export default function SidebarIconExample() {
                       lucide="ChevronsUpDownIcon"
                       tabler="IconSelector"
                       hugeicons="UnfoldMoreIcon"
+                      phosphor="CaretUpDownIcon"
                     />
                   </SidebarMenuButton>
                 </DropdownMenuTrigger>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
index 82169f7a0c..a0c269eda3 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
@@ -38,6 +38,7 @@ export default function SidebarInsetExample() {
             lucide="HomeIcon"
             tabler="IconHome"
             hugeicons="Home01Icon"
+            phosphor="HouseIcon"
           />
         ),
         isActive: true,
@@ -60,6 +61,7 @@ export default function SidebarInsetExample() {
             lucide="ChartLineIcon"
             tabler="IconChartLine"
             hugeicons="ChartIcon"
+            phosphor="ChartLineIcon"
           />
         ),
         items: [
@@ -81,6 +83,7 @@ export default function SidebarInsetExample() {
             lucide="ShoppingBagIcon"
             tabler="IconShoppingBag"
             hugeicons="ShoppingBag01Icon"
+            phosphor="BagIcon"
           />
         ),
         items: [
@@ -106,6 +109,7 @@ export default function SidebarInsetExample() {
             lucide="ShoppingCartIcon"
             tabler="IconShoppingCart"
             hugeicons="ShoppingCart01Icon"
+            phosphor="ShoppingCartIcon"
           />
         ),
         items: [
@@ -127,6 +131,7 @@ export default function SidebarInsetExample() {
             lucide="FileIcon"
             tabler="IconFile"
             hugeicons="File01Icon"
+            phosphor="FileIcon"
           />
         ),
       },
@@ -138,6 +143,7 @@ export default function SidebarInsetExample() {
             lucide="UserIcon"
             tabler="IconUser"
             hugeicons="UserIcon"
+            phosphor="UserIcon"
           />
         ),
       },
@@ -149,6 +155,7 @@ export default function SidebarInsetExample() {
             lucide="Settings2Icon"
             tabler="IconSettings"
             hugeicons="Settings05Icon"
+            phosphor="GearIcon"
           />
         ),
       },
@@ -162,6 +169,7 @@ export default function SidebarInsetExample() {
             lucide="LifeBuoy"
             tabler="IconLifebuoy"
             hugeicons="ChartRingIcon"
+            phosphor="LifebuoyIcon"
           />
         ),
       },
@@ -173,6 +181,7 @@ export default function SidebarInsetExample() {
             lucide="Send"
             tabler="IconSend"
             hugeicons="SentIcon"
+            phosphor="PaperPlaneTiltIcon"
           />
         ),
       },
@@ -211,6 +220,7 @@ export default function SidebarInsetExample() {
                               lucide="ChevronRightIcon"
                               tabler="IconChevronRight"
                               hugeicons="ArrowRight01Icon"
+                              phosphor="CaretRightIcon"
                             />
                             <span className="sr-only">Toggle</span>
                           </SidebarMenuAction>
diff --git a/apps/v4/registry/bases/radix/examples/spinner-example.tsx b/apps/v4/registry/bases/radix/examples/spinner-example.tsx
index 75cebffa1b..7585ed851c 100644
--- a/apps/v4/registry/bases/radix/examples/spinner-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/spinner-example.tsx
@@ -135,6 +135,7 @@ function SpinnerInEmpty() {
                 lucide="ArrowRightIcon"
                 tabler="IconArrowRight"
                 hugeicons="ArrowRight02Icon"
+                phosphor="ArrowRightIcon"
               />
             </a>
           </Button>
diff --git a/apps/v4/registry/bases/radix/examples/table-example.tsx b/apps/v4/registry/bases/radix/examples/table-example.tsx
index 1b09ba30e1..ce25e380b8 100644
--- a/apps/v4/registry/bases/radix/examples/table-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/table-example.tsx
@@ -269,6 +269,7 @@ function TableWithActions() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     <span className="sr-only">Open menu</span>
                   </Button>
@@ -295,6 +296,7 @@ function TableWithActions() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     <span className="sr-only">Open menu</span>
                   </Button>
@@ -321,6 +323,7 @@ function TableWithActions() {
                       lucide="MoreHorizontalIcon"
                       tabler="IconDots"
                       hugeicons="MoreHorizontalCircle01Icon"
+                      phosphor="DotsThreeOutlineIcon"
                     />
                     <span className="sr-only">Open menu</span>
                   </Button>
diff --git a/apps/v4/registry/bases/radix/examples/tabs-example.tsx b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
index 7776874f52..be60503f01 100644
--- a/apps/v4/registry/bases/radix/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
@@ -112,6 +112,7 @@ function TabsWithIcons() {
               lucide="AppWindowIcon"
               tabler="IconAppWindow"
               hugeicons="CursorInWindowIcon"
+              phosphor="AppWindowIcon"
             />
             Preview
           </TabsTrigger>
@@ -120,6 +121,7 @@ function TabsWithIcons() {
               lucide="CodeIcon"
               tabler="IconCode"
               hugeicons="CodeIcon"
+              phosphor="CodeIcon"
             />
             Code
           </TabsTrigger>
@@ -139,6 +141,7 @@ function TabsIconOnly() {
               lucide="HomeIcon"
               tabler="IconHome"
               hugeicons="HomeIcon"
+              phosphor="HouseIcon"
             />
           </TabsTrigger>
           <TabsTrigger value="search">
@@ -146,6 +149,7 @@ function TabsIconOnly() {
               lucide="SearchIcon"
               tabler="IconSearch"
               hugeicons="SearchIcon"
+              phosphor="MagnifyingGlassIcon"
             />
           </TabsTrigger>
           <TabsTrigger value="settings">
@@ -153,6 +157,7 @@ function TabsIconOnly() {
               lucide="SettingsIcon"
               tabler="IconSettings"
               hugeicons="SettingsIcon"
+              phosphor="GearIcon"
             />
           </TabsTrigger>
         </TabsList>
@@ -259,6 +264,7 @@ function TabsWithDropdown() {
                   lucide="MoreHorizontalIcon"
                   tabler="IconDots"
                   hugeicons="MoreHorizontalCircle01Icon"
+                  phosphor="DotsThreeIcon"
                 />
                 <span className="sr-only">More options</span>
               </Button>
diff --git a/apps/v4/registry/bases/radix/examples/toggle-example.tsx b/apps/v4/registry/bases/radix/examples/toggle-example.tsx
index d286700985..ea701557db 100644
--- a/apps/v4/registry/bases/radix/examples/toggle-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/toggle-example.tsx
@@ -30,6 +30,7 @@ function ToggleBasic() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </Toggle>
         <Toggle aria-label="Toggle italic">
@@ -37,6 +38,7 @@ function ToggleBasic() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </Toggle>
         <Toggle aria-label="Toggle underline">
@@ -44,6 +46,7 @@ function ToggleBasic() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </Toggle>
       </div>
@@ -60,6 +63,7 @@ function ToggleOutline() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
           Italic
         </Toggle>
@@ -68,6 +72,7 @@ function ToggleOutline() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
           Bold
         </Toggle>
@@ -137,6 +142,7 @@ function ToggleWithButtonIcon() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
           </Button>
           <Toggle variant="outline" aria-label="Toggle sm icon" size="sm">
@@ -144,6 +150,7 @@ function ToggleWithButtonIcon() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
           </Toggle>
         </div>
@@ -153,6 +160,7 @@ function ToggleWithButtonIcon() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
           </Button>
           <Toggle
@@ -164,6 +172,7 @@ function ToggleWithButtonIcon() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
           </Toggle>
         </div>
@@ -173,6 +182,7 @@ function ToggleWithButtonIcon() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
           </Button>
           <Toggle variant="outline" aria-label="Toggle lg icon" size="lg">
@@ -180,6 +190,7 @@ function ToggleWithButtonIcon() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
           </Toggle>
         </div>
@@ -199,6 +210,7 @@ function ToggleWithButtonIconText() {
               tabler="IconBold"
               hugeicons="TextBoldIcon"
               data-icon="inline-start"
+              phosphor="TextBIcon"
             />
             Button
           </Button>
@@ -207,6 +219,7 @@ function ToggleWithButtonIconText() {
               lucide="BoldIcon"
               tabler="IconBold"
               hugeicons="TextBoldIcon"
+              phosphor="TextBIcon"
             />
             Toggle
           </Toggle>
@@ -217,6 +230,7 @@ function ToggleWithButtonIconText() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
               data-icon="inline-start"
             />
             Button
@@ -230,6 +244,7 @@ function ToggleWithButtonIconText() {
               lucide="ItalicIcon"
               tabler="IconItalic"
               hugeicons="TextItalicIcon"
+              phosphor="TextItalicIcon"
             />
             Toggle
           </Toggle>
@@ -240,6 +255,7 @@ function ToggleWithButtonIconText() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
               data-icon="inline-start"
             />
             Button
@@ -249,6 +265,7 @@ function ToggleWithButtonIconText() {
               lucide="UnderlineIcon"
               tabler="IconUnderline"
               hugeicons="TextUnderlineIcon"
+              phosphor="TextUnderlineIcon"
             />
             Toggle
           </Toggle>
@@ -282,6 +299,7 @@ function ToggleWithIcon() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
             className="group-data-[state=on]/toggle:fill-accent-foreground"
           />
         </Toggle>
@@ -290,6 +308,7 @@ function ToggleWithIcon() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
             className="group-data-[state=on]/toggle:fill-accent-foreground"
           />
           Bookmark
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 286f996cd3..1283ca655a 100644
--- a/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
@@ -47,6 +47,7 @@ function ToggleGroupBasic() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -54,6 +55,7 @@ function ToggleGroupBasic() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -61,6 +63,7 @@ function ToggleGroupBasic() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -92,6 +95,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -99,6 +103,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -106,6 +111,7 @@ function ToggleGroupOutlineWithIcons() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -195,6 +201,7 @@ function ToggleGroupWithIcons() {
             lucide="StarIcon"
             tabler="IconStar"
             hugeicons="StarIcon"
+            phosphor="StarIcon"
           />
           Star
         </ToggleGroupItem>
@@ -207,6 +214,7 @@ function ToggleGroupWithIcons() {
             lucide="HeartIcon"
             tabler="IconHeart"
             hugeicons="FavouriteIcon"
+            phosphor="HeartIcon"
           />
           Heart
         </ToggleGroupItem>
@@ -219,6 +227,7 @@ function ToggleGroupWithIcons() {
             lucide="BookmarkIcon"
             tabler="IconBookmark"
             hugeicons="BookmarkIcon"
+            phosphor="BookmarkIcon"
           />
           Bookmark
         </ToggleGroupItem>
@@ -289,6 +298,7 @@ function ToggleGroupSort() {
             lucide="ArrowDownIcon"
             tabler="IconArrowDown"
             hugeicons="ArrowDownIcon"
+            phosphor="ArrowDownIcon"
           />
           Newest
         </ToggleGroupItem>
@@ -297,6 +307,7 @@ function ToggleGroupSort() {
             lucide="ArrowUpIcon"
             tabler="IconArrowUp"
             hugeicons="ArrowUpIcon"
+            phosphor="ArrowUpIcon"
           />
           Oldest
         </ToggleGroupItem>
@@ -305,6 +316,7 @@ function ToggleGroupSort() {
             lucide="TrendingUpIcon"
             tabler="IconTrendingUp"
             hugeicons="TradeUpIcon"
+            phosphor="TrendUpIcon"
           />
           Popular
         </ToggleGroupItem>
@@ -352,6 +364,7 @@ function ToggleGroupVertical() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -359,6 +372,7 @@ function ToggleGroupVertical() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -366,6 +380,7 @@ function ToggleGroupVertical() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
@@ -414,6 +429,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="BoldIcon"
             tabler="IconBold"
             hugeicons="TextBoldIcon"
+            phosphor="TextBIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="italic" aria-label="Toggle italic">
@@ -421,6 +437,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="ItalicIcon"
             tabler="IconItalic"
             hugeicons="TextItalicIcon"
+            phosphor="TextItalicIcon"
           />
         </ToggleGroupItem>
         <ToggleGroupItem value="underline" aria-label="Toggle underline">
@@ -428,6 +445,7 @@ function ToggleGroupVerticalOutlineWithIcons() {
             lucide="UnderlineIcon"
             tabler="IconUnderline"
             hugeicons="TextUnderlineIcon"
+            phosphor="TextUnderlineIcon"
           />
         </ToggleGroupItem>
       </ToggleGroup>
diff --git a/apps/v4/registry/bases/radix/examples/tooltip-example.tsx b/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
index d1669008a3..448fb31ba3 100644
--- a/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
@@ -76,6 +76,7 @@ function TooltipWithIcon() {
               lucide="InfoIcon"
               tabler="IconInfoCircle"
               hugeicons="AlertCircleIcon"
+              phosphor="InfoIcon"
             />
             <span className="sr-only">Info</span>
           </Button>
@@ -135,6 +136,7 @@ function TooltipWithKeyboard() {
               lucide="SaveIcon"
               tabler="IconDeviceFloppy"
               hugeicons="FloppyDiskIcon"
+              phosphor="FloppyDiskIcon"
             />
           </Button>
         </TooltipTrigger>
diff --git a/apps/v4/registry/bases/radix/ui/accordion.tsx b/apps/v4/registry/bases/radix/ui/accordion.tsx
index f2a2c7bbad..d5800b535d 100644
--- a/apps/v4/registry/bases/radix/ui/accordion.tsx
+++ b/apps/v4/registry/bases/radix/ui/accordion.tsx
@@ -53,6 +53,7 @@ function AccordionTrigger({
           tabler="IconChevronDown"
           data-slot="accordion-trigger-icon"
           hugeicons="ArrowDown01Icon"
+          phosphor="CaretDownIcon"
           className="cn-accordion-trigger-icon pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
         />
         <IconPlaceholder
@@ -60,6 +61,7 @@ function AccordionTrigger({
           tabler="IconChevronUp"
           data-slot="accordion-trigger-icon"
           hugeicons="ArrowUp01Icon"
+          phosphor="CaretUpIcon"
           className="cn-accordion-trigger-icon pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>
diff --git a/apps/v4/registry/bases/radix/ui/breadcrumb.tsx b/apps/v4/registry/bases/radix/ui/breadcrumb.tsx
index 0610205836..b0de30ad26 100644
--- a/apps/v4/registry/bases/radix/ui/breadcrumb.tsx
+++ b/apps/v4/registry/bases/radix/ui/breadcrumb.tsx
@@ -87,6 +87,7 @@ function BreadcrumbSeparator({
           lucide="ChevronRightIcon"
           tabler="IconChevronRight"
           hugeicons="ArrowRight01Icon"
+          phosphor="CaretRightIcon"
         />
       )}
     </li>
@@ -112,6 +113,7 @@ function BreadcrumbEllipsis({
         lucide="MoreHorizontalIcon"
         tabler="IconDots"
         hugeicons="MoreHorizontalCircle01Icon"
+        phosphor="DotsThreeIcon"
       />
       <span className="sr-only">More</span>
     </span>
diff --git a/apps/v4/registry/bases/radix/ui/calendar.tsx b/apps/v4/registry/bases/radix/ui/calendar.tsx
index 1fc4fac691..a91c19ce7e 100644
--- a/apps/v4/registry/bases/radix/ui/calendar.tsx
+++ b/apps/v4/registry/bases/radix/ui/calendar.tsx
@@ -148,6 +148,7 @@ function Calendar({
                 lucide="ChevronLeftIcon"
                 tabler="IconChevronLeft"
                 hugeicons="ArrowLeftIcon"
+                phosphor="CaretLeftIcon"
                 className={cn("size-4", className)}
                 {...props}
               />
@@ -160,6 +161,7 @@ function Calendar({
                 lucide="ChevronRightIcon"
                 tabler="IconChevronRight"
                 hugeicons="ArrowRightIcon"
+                phosphor="CaretRightIcon"
                 className={cn("size-4", className)}
                 {...props}
               />
@@ -171,6 +173,7 @@ function Calendar({
               lucide="ChevronDownIcon"
               tabler="IconChevronDown"
               hugeicons="ArrowDownIcon"
+              phosphor="CaretDownIcon"
               className={cn("size-4", className)}
               {...props}
             />
diff --git a/apps/v4/registry/bases/radix/ui/carousel.tsx b/apps/v4/registry/bases/radix/ui/carousel.tsx
index c29050b10b..0423976a95 100644
--- a/apps/v4/registry/bases/radix/ui/carousel.tsx
+++ b/apps/v4/registry/bases/radix/ui/carousel.tsx
@@ -199,6 +199,7 @@ function CarouselPrevious({
         lucide="ChevronLeftIcon"
         tabler="IconChevronLeft"
         hugeicons="ArrowLeft01Icon"
+        phosphor="CaretLeftIcon"
       />
       <span className="sr-only">Previous slide</span>
     </Button>
@@ -233,6 +234,7 @@ function CarouselNext({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
       />
       <span className="sr-only">Next slide</span>
     </Button>
diff --git a/apps/v4/registry/bases/radix/ui/checkbox.tsx b/apps/v4/registry/bases/radix/ui/checkbox.tsx
index 4c61c5030b..c782452eac 100644
--- a/apps/v4/registry/bases/radix/ui/checkbox.tsx
+++ b/apps/v4/registry/bases/radix/ui/checkbox.tsx
@@ -27,6 +27,7 @@ function Checkbox({
           lucide="CheckIcon"
           tabler="IconCheck"
           hugeicons="Tick02Icon"
+          phosphor="CheckIcon"
         />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
diff --git a/apps/v4/registry/bases/radix/ui/combobox.tsx b/apps/v4/registry/bases/radix/ui/combobox.tsx
index c65001ef97..08f98366e0 100644
--- a/apps/v4/registry/bases/radix/ui/combobox.tsx
+++ b/apps/v4/registry/bases/radix/ui/combobox.tsx
@@ -35,6 +35,7 @@ function ComboboxTrigger({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
         className="cn-combobox-trigger-icon pointer-events-none"
       />
     </ComboboxPrimitive.Trigger>
@@ -53,6 +54,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
         lucide="XIcon"
         tabler="IconX"
         hugeicons="Cancel01Icon"
+        phosphor="XIcon"
         className="cn-combobox-clear-icon pointer-events-none"
       />
     </ComboboxPrimitive.Clear>
@@ -168,6 +170,7 @@ function ComboboxItem({
           lucide="CheckIcon"
           tabler="IconCheck"
           hugeicons="Tick02Icon"
+          phosphor="CheckIcon"
           className="cn-combobox-item-indicator-icon pointer-events-none"
         />
       </ComboboxPrimitive.ItemIndicator>
@@ -269,6 +272,7 @@ function ComboboxChip({
             lucide="XIcon"
             tabler="IconX"
             hugeicons="Cancel01Icon"
+            phosphor="XIcon"
             className="cn-combobox-chip-indicator-icon pointer-events-none"
           />
         </ComboboxPrimitive.ChipRemove>
diff --git a/apps/v4/registry/bases/radix/ui/command.tsx b/apps/v4/registry/bases/radix/ui/command.tsx
index c2beec6cde..51d0ff3c03 100644
--- a/apps/v4/registry/bases/radix/ui/command.tsx
+++ b/apps/v4/registry/bases/radix/ui/command.tsx
@@ -82,6 +82,7 @@ function CommandInput({
             lucide="SearchIcon"
             tabler="IconSearch"
             hugeicons="SearchIcon"
+            phosphor="MagnifyingGlassIcon"
             className="cn-command-input-icon"
           />
         </InputGroupAddon>
@@ -164,6 +165,7 @@ function CommandItem({
         lucide="CheckIcon"
         tabler="IconCheck"
         hugeicons="Tick02Icon"
+        phosphor="CheckIcon"
         className="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
diff --git a/apps/v4/registry/bases/radix/ui/context-menu.tsx b/apps/v4/registry/bases/radix/ui/context-menu.tsx
index 5c7667543e..2ed5eea925 100644
--- a/apps/v4/registry/bases/radix/ui/context-menu.tsx
+++ b/apps/v4/registry/bases/radix/ui/context-menu.tsx
@@ -124,6 +124,7 @@ function ContextMenuSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto"
       />
     </ContextMenuPrimitive.SubTrigger>
@@ -168,6 +169,7 @@ function ContextMenuCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
@@ -196,6 +198,7 @@ function ContextMenuRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </ContextMenuPrimitive.ItemIndicator>
       </span>
diff --git a/apps/v4/registry/bases/radix/ui/dialog.tsx b/apps/v4/registry/bases/radix/ui/dialog.tsx
index 370562d43b..f2be4d91b1 100644
--- a/apps/v4/registry/bases/radix/ui/dialog.tsx
+++ b/apps/v4/registry/bases/radix/ui/dialog.tsx
@@ -71,6 +71,7 @@ function DialogContent({
                 lucide="XIcon"
                 tabler="IconX"
                 hugeicons="Cancel01Icon"
+                phosphor="XIcon"
               />
               <span className="sr-only">Close</span>
             </Button>
diff --git a/apps/v4/registry/bases/radix/ui/dropdown-menu.tsx b/apps/v4/registry/bases/radix/ui/dropdown-menu.tsx
index 91f74d555e..77866e3b4c 100644
--- a/apps/v4/registry/bases/radix/ui/dropdown-menu.tsx
+++ b/apps/v4/registry/bases/radix/ui/dropdown-menu.tsx
@@ -109,6 +109,7 @@ function DropdownMenuCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
@@ -151,6 +152,7 @@ function DropdownMenuRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
@@ -231,6 +233,7 @@ function DropdownMenuSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto"
       />
     </DropdownMenuPrimitive.SubTrigger>
diff --git a/apps/v4/registry/bases/radix/ui/input-otp.tsx b/apps/v4/registry/bases/radix/ui/input-otp.tsx
index 39f3fe5f53..f6a38cbd1c 100644
--- a/apps/v4/registry/bases/radix/ui/input-otp.tsx
+++ b/apps/v4/registry/bases/radix/ui/input-otp.tsx
@@ -82,6 +82,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
         lucide="MinusIcon"
         tabler="IconMinus"
         hugeicons="MinusSignIcon"
+        phosphor="MinusIcon"
       />
     </div>
   )
diff --git a/apps/v4/registry/bases/radix/ui/menubar.tsx b/apps/v4/registry/bases/radix/ui/menubar.tsx
index 3d397f8c3e..04d1e4defe 100644
--- a/apps/v4/registry/bases/radix/ui/menubar.tsx
+++ b/apps/v4/registry/bases/radix/ui/menubar.tsx
@@ -130,6 +130,7 @@ function MenubarCheckboxItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenubarPrimitive.ItemIndicator>
       </span>
@@ -158,6 +159,7 @@ function MenubarRadioItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
           />
         </MenubarPrimitive.ItemIndicator>
       </span>
@@ -238,6 +240,7 @@ function MenubarSubTrigger({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         className="ml-auto size-4"
       />
     </MenubarPrimitive.SubTrigger>
diff --git a/apps/v4/registry/bases/radix/ui/native-select.tsx b/apps/v4/registry/bases/radix/ui/native-select.tsx
index b4f02108b3..9d8f5b8347 100644
--- a/apps/v4/registry/bases/radix/ui/native-select.tsx
+++ b/apps/v4/registry/bases/radix/ui/native-select.tsx
@@ -31,6 +31,7 @@ function NativeSelect({
         lucide="ChevronDownIcon"
         tabler="IconSelector"
         hugeicons="UnfoldMoreIcon"
+        phosphor="CaretDownIcon"
         className="cn-native-select-icon pointer-events-none absolute select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
diff --git a/apps/v4/registry/bases/radix/ui/navigation-menu.tsx b/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
index 2eda2f0c9f..707c9407c1 100644
--- a/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
+++ b/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
@@ -78,6 +78,7 @@ function NavigationMenuTrigger({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
         className="cn-navigation-menu-trigger-icon"
         aria-hidden="true"
       />
diff --git a/apps/v4/registry/bases/radix/ui/pagination.tsx b/apps/v4/registry/bases/radix/ui/pagination.tsx
index 74eb8c5815..df06a1e2fc 100644
--- a/apps/v4/registry/bases/radix/ui/pagination.tsx
+++ b/apps/v4/registry/bases/radix/ui/pagination.tsx
@@ -79,6 +79,7 @@ function PaginationPrevious({
         lucide="ChevronLeftIcon"
         tabler="IconChevronLeft"
         hugeicons="ArrowLeft01Icon"
+        phosphor="CaretLeftIcon"
         data-icon="inline-start"
       />
       <span className="cn-pagination-previous-text hidden sm:block">
@@ -104,6 +105,7 @@ function PaginationNext({
         lucide="ChevronRightIcon"
         tabler="IconChevronRight"
         hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
         data-icon="inline-end"
       />
     </PaginationLink>
@@ -128,6 +130,7 @@ function PaginationEllipsis({
         lucide="MoreHorizontalIcon"
         tabler="IconDots"
         hugeicons="MoreHorizontalCircle01Icon"
+        phosphor="DotsThreeIcon"
       />
       <span className="sr-only">More pages</span>
     </span>
diff --git a/apps/v4/registry/bases/radix/ui/radio-group.tsx b/apps/v4/registry/bases/radix/ui/radio-group.tsx
index efa4d8e172..ff66a4518d 100644
--- a/apps/v4/registry/bases/radix/ui/radio-group.tsx
+++ b/apps/v4/registry/bases/radix/ui/radio-group.tsx
@@ -40,6 +40,7 @@ function RadioGroupItem({
           lucide="CircleIcon"
           tabler="IconCircle"
           hugeicons="CircleIcon"
+          phosphor="CircleIcon"
           className="cn-radio-group-indicator-icon"
         />
       </RadioGroupPrimitive.Indicator>
diff --git a/apps/v4/registry/bases/radix/ui/select.tsx b/apps/v4/registry/bases/radix/ui/select.tsx
index e8e5530e68..002361b095 100644
--- a/apps/v4/registry/bases/radix/ui/select.tsx
+++ b/apps/v4/registry/bases/radix/ui/select.tsx
@@ -55,6 +55,7 @@ function SelectTrigger({
           lucide="ChevronDownIcon"
           tabler="IconSelector"
           hugeicons="UnfoldMoreIcon"
+          phosphor="CaretDownIcon"
           className="cn-select-trigger-icon pointer-events-none"
         />
       </SelectPrimitive.Icon>
@@ -132,6 +133,7 @@ function SelectItem({
             lucide="CheckIcon"
             tabler="IconCheck"
             hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
             className="cn-select-item-indicator-icon pointer-events-none"
           />
         </SelectPrimitive.ItemIndicator>
@@ -168,6 +170,7 @@ function SelectScrollUpButton({
         lucide="ChevronUpIcon"
         tabler="IconChevronUp"
         hugeicons="ArrowUp01Icon"
+        phosphor="CaretUpIcon"
       />
     </SelectPrimitive.ScrollUpButton>
   )
@@ -187,6 +190,7 @@ function SelectScrollDownButton({
         lucide="ChevronDownIcon"
         tabler="IconChevronDown"
         hugeicons="ArrowDown01Icon"
+        phosphor="CaretDownIcon"
       />
     </SelectPrimitive.ScrollDownButton>
   )
diff --git a/apps/v4/registry/bases/radix/ui/sheet.tsx b/apps/v4/registry/bases/radix/ui/sheet.tsx
index 3a0f3b1014..8a9734c048 100644
--- a/apps/v4/registry/bases/radix/ui/sheet.tsx
+++ b/apps/v4/registry/bases/radix/ui/sheet.tsx
@@ -69,6 +69,7 @@ function SheetContent({
                 lucide="XIcon"
                 tabler="IconX"
                 hugeicons="Cancel01Icon"
+                phosphor="XIcon"
               />
               <span className="sr-only">Close</span>
             </Button>
diff --git a/apps/v4/registry/bases/radix/ui/sidebar.tsx b/apps/v4/registry/bases/radix/ui/sidebar.tsx
index 1cce57184b..6fca7c93ea 100644
--- a/apps/v4/registry/bases/radix/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/radix/ui/sidebar.tsx
@@ -274,6 +274,7 @@ function SidebarTrigger({
         lucide="PanelLeftIcon"
         tabler="IconLayoutSidebar"
         hugeicons="SidebarLeftIcon"
+        phosphor="SidebarIcon"
       />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
diff --git a/apps/v4/registry/bases/radix/ui/sonner.tsx b/apps/v4/registry/bases/radix/ui/sonner.tsx
index 40709d4231..897bd01cd7 100644
--- a/apps/v4/registry/bases/radix/ui/sonner.tsx
+++ b/apps/v4/registry/bases/radix/ui/sonner.tsx
@@ -18,6 +18,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="CircleCheckIcon"
             tabler="IconCircleCheck"
             hugeicons="CheckmarkCircle02Icon"
+            phosphor="CheckCircleIcon"
             className="size-4"
           />
         ),
@@ -26,6 +27,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="InfoIcon"
             tabler="IconInfoCircle"
             hugeicons="InformationCircleIcon"
+            phosphor="InfoIcon"
             className="size-4"
           />
         ),
@@ -34,6 +36,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="TriangleAlertIcon"
             tabler="IconAlertTriangle"
             hugeicons="Alert02Icon"
+            phosphor="WarningIcon"
             className="size-4"
           />
         ),
@@ -42,6 +45,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="OctagonXIcon"
             tabler="IconAlertOctagon"
             hugeicons="MultiplicationSignCircleIcon"
+            phosphor="XCircleIcon"
             className="size-4"
           />
         ),
@@ -50,6 +54,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
             lucide="Loader2Icon"
             tabler="IconLoader"
             hugeicons="Loading03Icon"
+            phosphor="SpinnerIcon"
             className="size-4 animate-spin"
           />
         ),
diff --git a/apps/v4/registry/bases/radix/ui/spinner.tsx b/apps/v4/registry/bases/radix/ui/spinner.tsx
index 75b7fd9711..d49902980f 100644
--- a/apps/v4/registry/bases/radix/ui/spinner.tsx
+++ b/apps/v4/registry/bases/radix/ui/spinner.tsx
@@ -7,6 +7,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
       lucide="Loader2Icon"
       tabler="IconLoader"
       hugeicons="Loading03Icon"
+      phosphor="SpinnerIcon"
       role="status"
       aria-label="Loading"
       className={cn("size-4 animate-spin", className)}
diff --git a/apps/v4/registry/icons/__phosphor__.ts b/apps/v4/registry/icons/__phosphor__.ts
new file mode 100644
index 0000000000..43e1debb4a
--- /dev/null
+++ b/apps/v4/registry/icons/__phosphor__.ts
@@ -0,0 +1,126 @@
+// Auto-generated by scripts/build-icons.ts
+export { ActivityIcon } from "@phosphor-icons/react"
+export { AppWindowIcon } from "@phosphor-icons/react"
+export { ArchiveIcon } from "@phosphor-icons/react"
+export { ArrowCircleLeftIcon } from "@phosphor-icons/react"
+export { ArrowClockwiseIcon } from "@phosphor-icons/react"
+export { ArrowDownIcon } from "@phosphor-icons/react"
+export { ArrowLeftIcon } from "@phosphor-icons/react"
+export { ArrowRightIcon } from "@phosphor-icons/react"
+export { ArrowSquareOutIcon } from "@phosphor-icons/react"
+export { ArrowUpIcon } from "@phosphor-icons/react"
+export { ArrowUpRightIcon } from "@phosphor-icons/react"
+export { ArrowsHorizontalIcon } from "@phosphor-icons/react"
+export { ArrowsVerticalIcon } from "@phosphor-icons/react"
+export { BagIcon } from "@phosphor-icons/react"
+export { BankIcon } from "@phosphor-icons/react"
+export { BellIcon } from "@phosphor-icons/react"
+export { BluetoothIcon } from "@phosphor-icons/react"
+export { BookOpenIcon } from "@phosphor-icons/react"
+export { BookmarkIcon } from "@phosphor-icons/react"
+export { CalculatorIcon } from "@phosphor-icons/react"
+export { CalendarBlankIcon } from "@phosphor-icons/react"
+export { CalendarIcon } from "@phosphor-icons/react"
+export { CalendarPlusIcon } from "@phosphor-icons/react"
+export { CaretDownIcon } from "@phosphor-icons/react"
+export { CaretLeftIcon } from "@phosphor-icons/react"
+export { CaretRightIcon } from "@phosphor-icons/react"
+export { CaretUpDownIcon } from "@phosphor-icons/react"
+export { CaretUpIcon } from "@phosphor-icons/react"
+export { ChartBarIcon } from "@phosphor-icons/react"
+export { ChartLineIcon } from "@phosphor-icons/react"
+export { ChartPieIcon } from "@phosphor-icons/react"
+export { ChatCircleIcon } from "@phosphor-icons/react"
+export { CheckCircleIcon } from "@phosphor-icons/react"
+export { CheckIcon } from "@phosphor-icons/react"
+export { CircleDashedIcon } from "@phosphor-icons/react"
+export { CircleIcon } from "@phosphor-icons/react"
+export { ClipboardIcon } from "@phosphor-icons/react"
+export { ClockIcon } from "@phosphor-icons/react"
+export { CloudArrowUpIcon } from "@phosphor-icons/react"
+export { CodeIcon } from "@phosphor-icons/react"
+export { CopyIcon } from "@phosphor-icons/react"
+export { CreditCardIcon } from "@phosphor-icons/react"
+export { CropIcon } from "@phosphor-icons/react"
+export { CubeIcon } from "@phosphor-icons/react"
+export { CurrencyCircleDollarIcon } from "@phosphor-icons/react"
+export { DotsThreeIcon } from "@phosphor-icons/react"
+export { DotsThreeOutlineIcon } from "@phosphor-icons/react"
+export { DotsThreeVerticalIcon } from "@phosphor-icons/react"
+export { DownloadIcon } from "@phosphor-icons/react"
+export { EnvelopeIcon } from "@phosphor-icons/react"
+export { EyeIcon } from "@phosphor-icons/react"
+export { EyeSlashIcon } from "@phosphor-icons/react"
+export { FileCodeIcon } from "@phosphor-icons/react"
+export { FileIcon } from "@phosphor-icons/react"
+export { FileTextIcon } from "@phosphor-icons/react"
+export { FloppyDiskIcon } from "@phosphor-icons/react"
+export { FolderIcon } from "@phosphor-icons/react"
+export { FolderOpenIcon } from "@phosphor-icons/react"
+export { FolderPlusIcon } from "@phosphor-icons/react"
+export { GearIcon } from "@phosphor-icons/react"
+export { GitBranchIcon } from "@phosphor-icons/react"
+export { GlobeIcon } from "@phosphor-icons/react"
+export { GridFourIcon } from "@phosphor-icons/react"
+export { HandPointingIcon } from "@phosphor-icons/react"
+export { HardDrivesIcon } from "@phosphor-icons/react"
+export { HeartIcon } from "@phosphor-icons/react"
+export { HouseIcon } from "@phosphor-icons/react"
+export { ImageIcon } from "@phosphor-icons/react"
+export { InfoIcon } from "@phosphor-icons/react"
+export { KeyboardIcon } from "@phosphor-icons/react"
+export { LayoutIcon } from "@phosphor-icons/react"
+export { LifebuoyIcon } from "@phosphor-icons/react"
+export { LightbulbIcon } from "@phosphor-icons/react"
+export { LightningIcon } from "@phosphor-icons/react"
+export { LinkIcon } from "@phosphor-icons/react"
+export { ListIcon } from "@phosphor-icons/react"
+export { ListPlusIcon } from "@phosphor-icons/react"
+export { MagicWandIcon } from "@phosphor-icons/react"
+export { MagnifyingGlassIcon } from "@phosphor-icons/react"
+export { MagnifyingGlassMinusIcon } from "@phosphor-icons/react"
+export { MagnifyingGlassPlusIcon } from "@phosphor-icons/react"
+export { MapTrifoldIcon } from "@phosphor-icons/react"
+export { MicrophoneIcon } from "@phosphor-icons/react"
+export { MinusIcon } from "@phosphor-icons/react"
+export { MonitorIcon } from "@phosphor-icons/react"
+export { MoonIcon } from "@phosphor-icons/react"
+export { PaletteIcon } from "@phosphor-icons/react"
+export { PaperPlaneTiltIcon } from "@phosphor-icons/react"
+export { PaperclipIcon } from "@phosphor-icons/react"
+export { PencilIcon } from "@phosphor-icons/react"
+export { PlusIcon } from "@phosphor-icons/react"
+export { QuestionIcon } from "@phosphor-icons/react"
+export { RecordIcon } from "@phosphor-icons/react"
+export { RobotIcon } from "@phosphor-icons/react"
+export { ScissorsIcon } from "@phosphor-icons/react"
+export { ShareIcon } from "@phosphor-icons/react"
+export { ShieldIcon } from "@phosphor-icons/react"
+export { ShoppingCartIcon } from "@phosphor-icons/react"
+export { SidebarIcon } from "@phosphor-icons/react"
+export { SignOutIcon } from "@phosphor-icons/react"
+export { SmileyIcon } from "@phosphor-icons/react"
+export { SparkleIcon } from "@phosphor-icons/react"
+export { SpeakerSlashIcon } from "@phosphor-icons/react"
+export { SpinnerIcon } from "@phosphor-icons/react"
+export { StarIcon } from "@phosphor-icons/react"
+export { SunIcon } from "@phosphor-icons/react"
+export { TableIcon } from "@phosphor-icons/react"
+export { TagIcon } from "@phosphor-icons/react"
+export { TerminalIcon } from "@phosphor-icons/react"
+export { TextBIcon } from "@phosphor-icons/react"
+export { TextItalicIcon } from "@phosphor-icons/react"
+export { TextTIcon } from "@phosphor-icons/react"
+export { TextUnderlineIcon } from "@phosphor-icons/react"
+export { TranslateIcon } from "@phosphor-icons/react"
+export { TrashIcon } from "@phosphor-icons/react"
+export { TrayIcon } from "@phosphor-icons/react"
+export { TrendUpIcon } from "@phosphor-icons/react"
+export { UploadIcon } from "@phosphor-icons/react"
+export { UserIcon } from "@phosphor-icons/react"
+export { UserMinusIcon } from "@phosphor-icons/react"
+export { WalletIcon } from "@phosphor-icons/react"
+export { WarningCircleIcon } from "@phosphor-icons/react"
+export { WarningIcon } from "@phosphor-icons/react"
+export { XCircleIcon } from "@phosphor-icons/react"
+export { XIcon } from "@phosphor-icons/react"
diff --git a/apps/v4/registry/icons/icon-phosphor.tsx b/apps/v4/registry/icons/icon-phosphor.tsx
new file mode 100644
index 0000000000..8aba47e58f
--- /dev/null
+++ b/apps/v4/registry/icons/icon-phosphor.tsx
@@ -0,0 +1,3 @@
+import { createIconLoader } from "./create-icon-loader"
+
+export const IconPhosphor = createIconLoader("phosphor")
diff --git a/packages/shadcn/src/icons/libraries.ts b/packages/shadcn/src/icons/libraries.ts
index 5c8de17d68..6f4901724e 100644
--- a/packages/shadcn/src/icons/libraries.ts
+++ b/packages/shadcn/src/icons/libraries.ts
@@ -24,6 +24,14 @@ export const iconLibraries = {
     usage: "<HugeiconsIcon icon={ICON} strokeWidth={2} />",
     export: "@hugeicons/core-free-icons",
   },
+  phosphor: {
+    name: "phosphor",
+    title: "Phosphor Icons",
+    packages: ["@phosphor-icons/react"],
+    import: "import { ICON } from '@phosphor-icons/react'",
+    usage: "<ICON strokeWidth={2} />",
+    export: "@phosphor-icons/react",
+  },
 } as const
 
 export type IconLibraries = typeof iconLibraries
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f8f7b6b4a..249ec8f6e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,6 +148,9 @@ importers:
       '@hugeicons/react':
         specifier: ^1.1.1
         version: 1.1.1(react@19.2.3)
+      '@phosphor-icons/react':
+        specifier: ^2.1.10
+        version: 2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-accessible-icon':
         specifier: ^1.1.1
         version: 1.1.7(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -1935,6 +1938,13 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@phosphor-icons/react@2.1.10':
+    resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>= 16.8'
+      react-dom: '>= 16.8'
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -9679,6 +9689,11 @@ snapshots:
   '@oxc-transform/binding-win32-x64-msvc@0.53.0':
     optional: true
 
+  '@phosphor-icons/react@2.1.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -12774,7 +12789,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -12785,7 +12800,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.6.1)))(eslint@9.33.0(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -12807,7 +12822,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -12836,7 +12851,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.33.0(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.6.1)))(eslint@9.33.0(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3